jquery無重新整理檔案上傳 解決IE安全性問題

標籤：c   style   class   blog   code   java   

很多項目中都需要有檔案上傳的功能，一般檔案上傳有幾種方式，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 [email protected]    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其他暫時沒有測試