jquery无刷新文件上传 解决IE安全性问题

很多项目中都需要有文件上传的功能，一般文件上传有几种方式，input file表单上传，flash上传。

flash就不说了，能接受flash的就用吧。

下面介绍的这种是基于input file控件的无刷新上传文件方案。

一般上传是用iframe表单提交的方式，页面中的iframe刷新是不会刷新整个页面的，所以由iframe利用input file提交表单上传到服务器在主页面看起来就是无刷新的。

大家能想到的方法无外乎：

1.在页面新建一个iframe和一个form

2.form的target指向iframe

3.form中新建一个input file

4.点击form中的input选择文件之后提交form实现上传，返回上传到服务器的文件地址，获取到地址返回到主页面（注意：IE中必须由用户自己点击input才能提交form。否则报拒绝访问的错误）

5.主页面获得地址展示

这里有一个小小的问题用户必须自己点击input选择文件才能提交！（只有IE会有问题，但是这是不能忽视的）也就是说让用户点击的input嵌套在一个form中。

form与主页面之间还要做各种交互。

这无论对于按钮布局样式还是程序便捷性都是不好的。

然后我去网站找了很多很优秀的上传插件，不是说不好，一是我觉得太重量级，二是自定义程度不高，第三个原因呢不知道是不是我太笨的缘故 教程看不懂啊！没有很好的demo也是造成很多使用者的困扰！索性自己写一个吧。

基本原理就是上述的那样 做了以下调整：

在主页面中添加input由用户去点击选择文件，input的change事件把input本身复制到form中并提交form，iframe的load事件得到返回的地址之后回调方法。

然后方法做了一些优化方便使用者调用

/*    通用文件上传类    version 1.00    code by chenfeng during 2013-03-12    link [e-mail]    Demo：    $("#filepost1").Uploader({////上传控件的ID        action: "/ajax/uploaderajax.ashx",//上传到服务器的路径 默认：/ajax/uploaderajax.ashx        params: "action=uploadpic",//特殊参数 随同文件一起提交到后台,以&号分隔 默认：action=uploadpic        maxsize: 1024 * 500,//文件最大尺寸  默认：500K        exts: ".jpg|.png|.gif|.jpeg",//文件格式限制 默认：.jpg|.png|.gif|.jpeg        callback: function (file, urlpath) { //上传完成之后回调函数 返回 控件实例和文件服务器路径        }    });*/$(function () {    var Uploader = function (file, options) {        var defaults = {            action: "/ajax/uploaderajax.ashx",            params: "action=uploadpic",            maxsize: 1024 * 500,            exts: ".jpg|.png|.gif|.jpeg",            callback: function (fileid, urlpath) { }        };        if (options == "remove") {            Uploader.Remove(file);            return;        }        var opts = $.extend(defaults, options);        var params = opts.params.split("&");        var form = $('<form action="' + opts.action + '" enctype="multipart/form-data" method="post" target="ifr_' + $(file).attr("id") + '" name="form_' + $(file).attr("id") + '" id="form_' + $(file).attr("id") + '" style="display: none;"/>');        for (var i = 0; i < params.length; i++) {            var values = params[i].split("=");            $(form).append('<input type="hidden" name="' + values[0] + '" value="' + values[1] + '"/>');        }        var iframe = $('<iframe name="ifr_' + $(file).attr("id") + '" id="ifr_' + $(file).attr("id") + '" style="position: absolute; top: -999px;"></iframe>');        $(file).change(function (e) {            if ($(this).val() != "" && $(this) != undefined) {                if (!Uploader.BeforeCheck(file, opts)) {                    return;                }                var pfile = $(this).parent();                $(form).append($(this));                $(form).submit();                $(pfile).append($(this));            }        });        $(iframe).load(function () {            var contents = $(this).contents().get(0);            var data = $(contents).find('body').html();            if (data == "") { return; }            data = window.eval('(' + data + ')');            if (data.code != 200) {                alert(data.message);                return;            }            var picUrl = data.data.path;            opts.callback(file, picUrl);        });        $("body").append(form);        $("body").append(iframe);    }    Uploader.BeforeCheck = function (file, opts) {        var fileName = "";        var f = null;        if ($.browser.msie) {            f = document.getElementById($(file).attr("id"));        }        else {            f = document.getElementById($(file).attr("id")).files[0];        }        if (!$.browser.msie && f.size > opts.maxsize) {            alert(Uploader.ErrorTip.MaxSize);            return false;        }        fileName = $(file).val();        var exts = opts.exts.split("|");        var isExt = false;        for (var i = 0; i < exts.length; i++) {            if (fileName.indexOf(exts[i]) >= 0) {                isExt = true;                break;            }        }        if (!isExt) {            alert(Uploader.ErrorTip.Ext);            return false;        }        return true;    }    Uploader.ErrorTip = {        MaxSize: "文件超过尺寸",        Ext: "文件格式错误"    }    Uploader.Remove = function (file) {        $(file).remove()        $("#form_" + $(file).attr("id")).remove();        $("#ifr_" + $(file).attr("id")).remove();    }    $.fn.Uploader = function (options) {        return new Uploader(this, options);    }})

 

注意：上传图片服务器返回数据json格式是

{code:200,message:"成功",data:{path:"XX/XX/XX.jpg"}}

这是默认可解析的格式，当然自己可以改写

经本人测试支持以下浏览器：

IE6.0+,firefox,chrome,safari其他暂时没有测试