首页 > 代码库 > jquery无刷新文件上传 解决IE安全性问题

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

2024-07-07 04:39:17   222人阅读

很多项目中都需要有文件上传的功能，一般文件上传有几种方式，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 2014年6月5日
    link zhaoyunfei9271@163.com

    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="http://www.mamicode.com/‘ + 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 = http://www.mamicode.com/$(contents).find(‘body‘).html();
            if (data =http://www.mamicode.com/="") { 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其他暂时没有测试


联系
我们