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

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

说更新不怎么正确,其实是优化吧




(function ($) {
    $.extend($.fn, {
        upload: function (options) {
            options = $.extend(options, {
                fileType: "gif|jpg|jpeg|png|bmp",
                url: "/upload/upload.aspx",
                params: ""
            });
            //上传主函数
            this.each(function () {
                var $this = $(this);
                var wrap = $this.parent();
                //初始化上传控件
                var uploador = uploader(options.url, options.params, wrap, "100", "");
                uploador.onload();
                $this.bind("click", function () {
                    var inputfile = $(this).parent().find("input:file");
                    var hiddenfile = $(this).parent().find("input:hidden");
                    var fileBox = inputfile.parent();
                    if (inputfile.val() === "") {
                        alert("请选择要上传的图片!");
                        return false;
                    }

                    //验证图片
                    if (!uploador.checkFile(inputfile.val(), options.fileType)) {
                        alert("文件格式不正确,只能上传格式为:" + options.fileType + "的文件。");
                        return false;
                    }
                    //若隐藏域中有图片,先删除图片
                    if (hiddenfile.val() !== "") {
                        uploador.delImage(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.showImage(data.imgurl, $this.parent());
                                    $this.parent().find("input:hidden").val(data.imgurl);
                                }
                                $this.attr("disabled", false);
                                fileBox.html("<input type=\"file\" name=\"file\" />");
                                form.remove();
                            }
                        });
                    } catch (e) {
                        alert(e.message);
                    }
                });
            });
        }
    });
    /// <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|