首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

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

2012-11-23 
图片上传插件,基于jquery的上传插件,ajax图片上传, 更新更新啦说更新不怎么正确,其实是优化吧(function ($

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

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


图片下传插件,基于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|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) {                    var image = this.createImage();                    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();                },                //绑定双击删除事件                bindDelete: function () {                    var $this = this;                    wrap.find(".imgdiv").find("img").bind("dblclick", function () {                        $this.delImage(true);                    });                },                //删除图片 isShowBox表示是否弹出提示信息                delImage: function (isShowBox) {                    var inputfile = wrap.find("input:hidden");                    if (inputfile.val() !== "") {                        var data = { oper: "delete", imgurl: inputfile.val(), r: Math.random() };                        $.getJSON(url, data, function (data) {                            if (isShowBox) { alert(data.msg) }                            if (data.result === "1") {                                inputfile.val("");                                wrap.find(".imgdiv").html("");                            }                        });                    }                },                onload: function () {                    var hiddenInput = wrap.find("input:hidden");                    if (typeof hiddenInput !== "undefined" && hiddenInput.val() !== "") {                        this.showImage(hiddenInput.val())                    }                }            }        });        return uploader.methods;    }})(jQuery)
上一篇:再次和大家分享我的图片上传插件,基于jquery的上传插件,ajax图片上传。个人觉得写法有点进步。呵呵

热点排行