日期:2014-05-16  浏览次数:20622 次

图片上传插件,基于jquery的上传插件,ajax图片上传,再更新

由于在项目中使用遇到了一些情况,之前的方法无法满足这些需求,于是重新修改了一下。遇到什么新的需求呢?项目做的是一个视频网站,想在上传视频后点击某个按钮自动生成视频的缩略图,如果不想自动生成(自动生成会有点模糊),则可以自己上传图片。大概的界面如下:

要想实现这样的功能,必须得把upload中的一些方法暴露出来这样就可以在外部中使用了。更新后的写法。

(function ($) {
    $.extend($.fn, {
        upload: function (options) {
            options = $.extend(options, {
                fileType: "gif|jpg|jpeg|png|bmp",
                url: "/user/upload.aspx",
                params: "",
                width: "100",
                height: ""
            });
            var methods = new uploader(options.url, options.params, null, options.width, options.height);
            //上传主函数
            this.each(function () {
                var $this = $(this);
                var wrap = $this.parent();
                //初始化上传控件
                var uploador = new uploader(options.url, options.params, wrap, options.width, options.height);
                uploador.onload();
                $this.bind("click", function () {
                    var inputfile = wrap.find("input:file");
                    var fileBox = inputfile.parent();
                    if (inputfile.val() === "") {
                        alert("请选择要上传的图片!");
                        return false;
                    }
                    //验证图片
                    if (!uploador.checkFile(inputfile.val(), options.fileType)) {
                        alert("文件格式不正确,只能上传格式为:" + options.fileType + "的文件。");
                        return false;
                    }
                    //创建表单
                    var form = uploador.createForm();
                    //把上传控件附加到表单
                    inputfile.appendTo(form);
                    fileBox.html("<img src=\"/images/loading.gif\" />   正在上传...  ");
                    $this.attr("disabled", true);
                    try {
                        //开始ajax提交表单
                        form.ajaxSubmit({ type: "POST",
                            success: function (data) {
                                data = eval("(" + data + ")");
                                if (data.result !== "1") {
                                    alert(data.msg);
                                } else {
                                    uploador.delToShow(data.imgurl);
                                }
                                $this.attr("disabled", false);
                                fileBox.html("<input type=\"file\" name=\"file\" />");
                                form.remove();
                            }
                        });
                    } catch (e) {
                        alert(e.message);
                    }
                });
            });
            return methods; //返回methods方便从外部调用
        }
    });
    /// <summary>
    /// 初始化上传控件 url=上传路径,不加参数 params=参数如name=jaryway&pass=123
    /// </summary>
    /// <param name="url" type="string">上传路径</param>
    /// <param name="params" type="string">上传的参数 eg:"userid=1&username=xiaoming"</param>
    /// <param name="wrap" type="Object">上传体(整个上传体)</param>
    /// <param name="width" type="string">显示图的宽,为空则表示自动(给定高度则宽度自动)或默认 eg:"100"</param>
    /// <param name="height" type="string">显示图的高,为空则表示自动(给定宽度则高度自动)或默认 eg:"100"</param>
    var uploader = function (url, params, wrap, width, height) {
        $.extend(uploader, {
            methods: {
                //检查文件后缀 val1=上传的文件名称,val2=允许的文件类型,如:gif|jpg|jpeg|png|bmp