图片上传插件，基于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                checkFile: function (val1, val2) {                    //获得文件后缀                    val1 = val1.substring(val1.lastIndexOf("."), val1.length)                    val1 = val1.toLowerCase();                    if (typeof val2 !== 'string' || val2 === "") { val2 = "gif|jpg|jpeg|png|bmp"; }                    return new RegExp("\.(" + val2 + ")$").test(val1);                },                //创建上传表单                createForm: function () {                    var uploadform = document.createElement("form");                    uploadform.action = url + "?oper=upload" + params + "&r=" + Math.random();                    uploadform.method = "post";                    uploadform.enctype = "multipart/form-data";                    uploadform.style.display = "none";                    //将表单加当document上，                    //创建表单后一定要加上这句否则得到的form不能上传。document后要加上body,否则火狐下不行。                    document.body.appendChild(uploadform);                    return $(uploadform);                },                //创建图片                createImage: function () {                    //不能用 new Image() 来创建图片，否则ie下不能改变img 的宽高                    var image = $(document.createElement("img"));                    image.attr({ "title": "双击图片可删除图片！" });                    if (width !== "")                        image.attr({ "width": width });                    if (height !== "")                        image.attr({ "height": height });                    return image;                },                //显示图片                showImage: function (imgurl, wrap1) {                    var image = this.createImage();                    wrap = typeof wrap1 === "object" ? wrap1 : wrap;                    var hiddenfile = wrap.find("input:hidden");                    hiddenfile.val(imgurl);                    wrap.find(".imgdiv").html("");                    var a = $("<a target=\"_blank\" title=\"查看原图\">查看</a>");                    a.attr("href", imgurl);                    //要先append再给img赋值，否则在ie下不能缩小宽度。                    image.appendTo(wrap.find(".imgdiv"));                    image.attr("src", imgurl);                    a.appendTo(wrap.find(".imgdiv"));                    this.bindDelete(wrap);                },                //删除原图(如果原图存在)后显示                delToShow: function (imgurl, wrap1) {                    wrap = typeof wrap1 === "object" ? wrap1 : wrap;                    var hiddenfile = wrap.find("input:hidden");                    //上传成功后，再删除图片，以免图片丢失                    //若隐藏域中有图片，先删除图片                    if (hiddenfile.val() !== "") {                        this.delImage(imgurl, false, wrap);                    }                    else {                        this.showImage(imgurl, wrap);                    }                },                //绑定双击删除事件                bindDelete: function (wrap1) {                    var $this = this;                    wrap = typeof wrap1 === "object" ? wrap1 : wrap;                    wrap.find(".imgdiv").find("img").bind("dblclick", function () {                        $this.delImage("",true, wrap);                    });                },                //删除图片,如果imgurl不为空则显示新图片                //isShowBox表示是否弹出提示信息                //如果imgurl不等于空字符串则在删除图片后显示新图片                delImage: function (imgurl, isShowBox, wrap1) {                    $this = this;                    wrap = typeof wrap1 === "object" ? wrap1 : wrap;                    var hiddenfile = wrap.find("input:hidden");                    if (typeof hiddenfile !== "undefined" && hiddenfile.val() !== "") {                        var data = { oper: "delete", imgurl: hiddenfile.val(), r: Math.random() };                        $.getJSON(url, data, function (data) {                            if (isShowBox) { alert(data.msg) }                            if (data.result === "1") {                                hiddenfile.val("");                                wrap.find(".imgdiv").html("");                            }                            if (imgurl !== "") {                                $this.showImage(imgurl, wrap);                            }                        });                    }                },                onload: function (wrap1) {                    wrap = typeof wrap1 === "object" ? wrap1 : wrap;                    var hiddeninput = wrap.find("input:hidden");                    if (typeof hiddeninput !== "undefined" && hiddeninput.val() !== "") {                        this.showImage(hiddeninput.val())                    }                }            }        });        return uploader.methods;    }})(jQuery);

调用：

var uploador;$(document).ready(function () {    uploador = $("input.upload").upload();    //自动生成图片    $("#genImage").click(function () {        if ($("#txtFilePath").val() == "") {            alert("请先上传视频文件");            return false;        }        Lvegu.Loading.show("正在生成视频缩略图，请等待...");        $.ajax({            type: "get",            dataType: "json",            data: "file=" + $("#txtFilePath").val(),            url: "courseware_ajax.aspx?oper=ajaxGenImage&vsttm=" + (new Date().getTime()),            error: function (XmlHttpRequest, textStatus, errorThrown) { Lvegu.Loading.hide(); alert(XmlHttpRequest.responseText); },            success: function (d) {                Lvegu.Loading.hide();                switch (d.result) {                    case '-1':                    case '0':                        alert(d.msg);                        break;                    case '1':                        uploador.delToShow(d.imgurl, $("#upimg"));                        break;                }            }        });    });});function delFile(filepath) {    var r = Math.random();    $.getJSON("courseware_ajax.aspx?oper=ajaxDeleteFile&r=" + r + "&file=" + filepath, function (d) {        return d.result === "1";    });}

html代码：

<tr>    <th align="right">资源路径</th>    <td><asp:TextBox ID="txtFilePath" runat="server" CssClass="ipt" Width="250px"></asp:TextBox>        <span style="display:none">........ </span>        <br /><span id="tipFilePath">ssss</span>    </td></tr><tr>    <th align="right">上传课件</th>    <td>...................        <br /><input type="button" value="生成缩略图" id="genImage" />    </td></tr><tr>    <th align="right">缩略图</th>    <td><div style="width: 100%; float: left;" id="upimg">        <asp:HiddenField runat="server" Value="" ID="hfImg" />        <div class="imgdiv"></div>        <span><input type="file" name="file" /></span>         <input type="button" value="上传" class="upload" /><br />    </div>    </td></tr>

暂时先整了到这里，过段时间在写个详细的和大家分享。

Demo下载