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

weizengxun

已于 2024-03-06 10:20:54 修改

阅读量5.7k

点赞数 3

分类专栏： js 图片上传文章标签： jquery ajax okhttp

于 2012-11-19 01:17:19 首次发布

本文链接：https://blog.csdn.net/weizengxun/article/details/8197716

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

图片上传

4 篇文章 0 订阅

订阅专栏

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

要想实现这样的功能，必须得把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下载