天天看點
傳回

批量上傳js插件的使用案例

檔案上傳無疑是web應用中一個非常常用的功能，不管是PHP、jsp還是aspx、mvc等都會需要檔案上傳，但是衆所周知當使用自帶的檔案上傳功能時總會出現頁面重新整理的情況。當然現在有了html5這個好東西，我們可以調用它的新的api來做檔案的異步上傳。但是非常可惜，這個新的api并非每個浏覽器都支援。

如果你會flash這當然很好，你可以自己寫一個flash的上傳插件來支援上傳，不過本文不會對flash這個技術做任何的讨論。

好了言歸正傳，我們還是來讨論下隻使用js的情況下如何才能異步無重新整理的上傳檔案，首先估計大家會想到ajax，不過很不幸在目前沒有html5支援的浏覽器中使用ajax上傳檔案是不行的，而在國内使用支援html5浏覽器的使用者還不是絕大多數，那麼這種方案隻能放棄。

還有沒有辦法喃？當然有那就是使用iframe，看下面的html代碼：

[html] 

view

plain

 copy https://code.csdn.net/snippets/74821 https://code.csdn.net/snippets/74821/fork

  1. <body>  
  2.     <form action="WebForm1.aspx" target="dynamic_creation_upload_iframe" method="POST" enctype="multipart/form-data">  
  3. 　　　　<input type="file" name="upload1" />  
  4.     </form>  
  5.     <iframe name="dynamic_creation_upload_iframe"></iframe>  
  6. </body>  

這是一段我們經常使用的上傳代碼，如果你使用的是asp.net控件，它最終也會生成這樣的html代碼，其中的enctype就是指定需要上傳檔案的屬性（action和method屬性就不需要解釋了吧）。不過在這個form上我添加了一個target屬性，并且指定了它的值為下面那個iframe的name屬性的值，這是為什麼？其實很簡單，就是當你送出這個form時（這樣就開始了檔案上傳），等服務端接收到檔案并儲存成功響應用戶端時，将響應的内容直接在這個iframe中重新整理，這樣這個iframe就起到了一個隔離的作用，此時我們隻需要在這個iframe上綁定一個onload事件，那麼當它重新整理時這個事件将被觸發，呵呵

我們就可以在這個load事件中做事情了（例如：在load的時候擷取服務端響應的結果，進而得知上傳是否成功）

有了這個思路事情就好辦了，以下是根據這種思路建構的一個js插件

[javascript] 

https://code.csdn.net/snippets/74821 https://code.csdn.net/snippets/74821/fork
  1. /* 
  2.     無重新整理異步上傳插件 
  3.     2013-10-16 Devotion Created 
  4. */  
  5. (function ($) {  
  6.     var defaultSettings = {  
  7.         url: "",                                 //上傳位址  
  8.         buttonFeature: true,                    //true:點選按鈕時僅選擇檔案； false:選擇完檔案後立即上傳  
  9.         fileSuffixs: ["jpg", "png"],             //允許上傳的檔案字尾名清單  
  10.         errorText: "不能上傳字尾為 {0} 的檔案！", //錯誤提示文本，其中{0}将會被上傳檔案的字尾名替換  
  11.         onCheckUpload: function (text) { //上傳時檢查檔案字尾名不包含在fileSuffixs屬性中時觸發的回調函數，(text為錯誤提示文本)  
  12.             alert(text);  
  13.         },  
  14.         onComplete: function (msg) { //上傳完成後的回調函數[不管成功或失敗，它都将被觸發](msg為服務端的傳回字元串)  
  16.         onChosen: function (file, obj) { //選擇檔案後的回調函數，(file為選中檔案的本地路徑;obj為目前的上傳控件執行個體)  
  17.             //alert(file);  
  19.         maximumFilesUpload: 5,//最大檔案上傳數(當此屬性大于1時，buttonFeature屬性隻能為true)  
  20.         onSubmitHandle: function (uploadFileNumber) { //送出上傳時的回調函數，uploadFileNumber為目前上傳的檔案數量  
  21.             //在此回調中傳回false上傳送出将被阻止  
  22.             return true;  
  24.         onSameFilesHandle: function (file) { //當重複選擇相同的檔案時觸發  
  25.             //在此回調中傳回false目前選擇的檔案将從上傳隊列中取消  
  28.         perviewImageElementId: "",//用于預覽上傳圖檔的元素id（請傳入一個div元素的id）  
  29.         perviewImgStyle: null//用于設定圖檔預覽時的樣式（可不設定，在不設定的情況下多檔案上傳時隻能顯示一張圖檔），如{ width: '100px', height: '100px', border: '1px solid #ebebeb' }  
  30.     };  
  31.     $.fn.uploadFile = function (settings) {  
  32.         settings = $.extend({}, defaultSettings, settings || {});  
  33.         if (settings.perviewImageElementId) {  
  34.             //設定圖檔預覽元素的必須樣式  
  35.             if (!settings.perviewImgStyle) {  
  36.                 var perviewImg = document.getElementById(settings.perviewImageElementId);  
  37.                 perviewImg.style.overflow = "hidden";  
  38.             }  
  39.         }  
  40.         return this.each(function () {  
  41.             var self = $(this);  
  42.             var upload = new UploadAssist(settings);  
  43.             upload.createIframe(this);  
  44.             //綁定目前按鈕點選事件  
  45.             self.bind("click", function (e) {  
  46.                 upload.chooseFile();  
  47.             });  
  48.             //将上傳輔助類的執行個體，存放到目前對象中，友善外部擷取  
  49.             self.data("uploadFileData", upload);  
  50.             //建立的iframe中的那個iframe，它的事件需要延遲綁定  
  51.             window.setTimeout(function () {  
  52.                 //為建立的iframe内部的iframe綁定load事件  
  53.                 $(upload.getIframeContentDocument().body.lastChild).on("load", function () {  
  54.                     var dcmt = upload.getInsideIframeContentDocument();  
  55.                     if (dcmt.body.innerHTML) {  
  56.                         if (settings.onComplete) {  
  57.                             settings.onComplete(dcmt.body.innerHTML);  
  58.                         }  
  59.                         dcmt.body.innerHTML = "";  
  60.                     }  
  61.                 });  
  62.             }, 100);  
  63.         });  
  65. })(jQuery);  
  66. //上傳輔助類  
  67. function UploadAssist(settings) {  
  68.     //儲存設定  
  69.     this.settings = settings;  
  70.     //已選擇檔案的路徑集合  
  71.     this.choseFilePath = [];  
  72.     //建立的iframe唯一名稱  
  73.     this.iframeName = "upload" + this.getInputFileName();  
  74.     return this;  
  75. }  
  76. UploadAssist.prototype = {  
  77.     //輔助類構造器  
  78.     constructor: UploadAssist,  
  79.     //建立iframe  
  80.     createIframe: function (/*插件中指定的dom對象*/elem) {  
  81.         var html = "<html>"  
  82.                 + "<head>"  
  83.                 + "<title>upload</title>"  
  84.                 + "<script>"  
  85.                 + "function getDCMT(){return window.frames['dynamic_creation_upload_iframe'].document;}"  
  86.                 + "</" + "script>"  
  87.                 + "</head>"  
  88.                 + "<body>"  
  89.                 + "<form method='post' target='dynamic_creation_upload_iframe' enctype='multipart/form-data' action='" + this.settings.url + "'>"  
  90.                 + "</form>"  
  91.                 + "<iframe name='dynamic_creation_upload_iframe'></iframe>"  
  92.                 + "</body>"  
  93.                 + "</html>";  
  94.         this.iframe = $("<iframe name='" + this.iframeName + "'></iframe>")[0];  
  95.         this.iframe.style.width = "0px";  
  96.         this.iframe.style.height = "0px";  
  97.         this.iframe.style.border = "0px solid #fff";  
  98.         this.iframe.style.margin = "0px";  
  99.         elem.parentNode.insertBefore(this.iframe, elem);  
  100.         var iframeDocument = this.getIframeContentDocument();  
  101.         iframeDocument.write(html);  
  102.     },  
  103.     //擷取上傳控件名稱  
  104.     getInputFileName: function () {  
  105.         return (new Date()).valueOf();  
  107.     //建立上傳控件到建立的iframe中  
  108.     createInputFile: function () {  
  109.         var that = this;  
  110.         var dcmt = this.getIframeContentDocument();  
  111.         var input = dcmt.createElement("input");  
  112.         input.type = "file";  
  113.         input.setAttribute("name", "input" + this.getInputFileName());  
  114.         input.onchange = function () {  
  115.             var fileSuf = this.value.substring(this.value.lastIndexOf(".") + 1);  
  116.             //檢查是否為允許上傳的檔案  
  117.             if (!that.checkFileIsUpload(fileSuf, that.settings.fileSuffixs)) {  
  118.                 that.settings.onCheckUpload(that.settings.errorText.replace("{0}", fileSuf));  
  119.                 return;  
  121.             //選中後的回調  
  122.             that.settings.onChosen(this.value, this);  
  123.             if (that.checkFileIsExist(this.value)) {  
  124.                 //儲存已經選擇的檔案路徑  
  125.                 that.choseFilePath.push({ "name": this.name, "value": this.value });  
  126.                 var status = that.settings.onSameFilesHandle(this.value);  
  127.                 if (typeof status === "boolean" && !status) {  
  128.                     that.removeFile(this.value);  
  129.                     return;  
  130.                 }  
  131.             } else {  
  135.             //是否開啟了圖檔預覽  
  136.             if (that.settings.perviewImageElementId) {  
  137.                 if (!that.settings.perviewImgStyle) {  
  138.                     perviewImage.beginPerview(this, that.settings.perviewImageElementId);  
  139.                 } else {  
  140.                     var ul = perviewImage.getPerviewRegion(that.settings.perviewImageElementId);  
  141.                     var main = perviewImage.createPreviewElement(this.value);  
  142.                     var li = document.createElement("li");  
  143.                     //li.style.float = "left";  
  144.                     if ($.browser.msie) {  
  145.                         li.style.styleFloat = "left";  
  147.                     else {  
  148.                         li.style.cssFloat = "left";  
  150.                     li.style.margin = "5px";  
  151.                     li.appendChild(main);  
  152.                     ul.appendChild(li);  
  153.                     var div = $(main).children("div").get(0);  
  154.                     $(main).children("img").hover(function () {  
  155.                         this.src = perviewImage.closeImg.after;  
  156.                     }, function () {  
  157.                         this.src = perviewImage.closeImg.before;  
  158.                     }).click(function () {  
  159.                         that.removeFile($(this).attr("filepath"));  
  160.                         $(this).parents("li").remove("li");  
  161.                     });  
  162.                     perviewImage.beginPerview(this, div, dcmt);  
  165.             if (!that.settings.buttonFeature) {  
  166.                 that.submitUpload();  
  168.         };  
  169.         dcmt.forms[0].appendChild(input);  
  170.         return input;  
  172.     //擷取建立的iframe中的document對象  
  173.     getIframeContentDocument: function () {  
  174.         return this.iframe.contentDocument || this.iframe.contentWindow.document;  
  176.     //擷取建立的iframe所在的window對象  
  177.     getIframeWindow: function () {  
  178.         return this.iframe.contentWindow || this.iframe.contentDocument.parentWindow;  
  180.     //擷取建立的iframe内部iframe的document對象  
  181.     getInsideIframeContentDocument: function () {  
  182.         return this.getIframeWindow().getDCMT();  
  184.     //擷取上傳input控件  
  185.     getUploadInput: function () {  
  186.         var inputs = this.getIframeContentDocument().getElementsByTagName("input");  
  187.         var len = inputs.length;  
  188.         if (len > 0) {  
  189.             if (!inputs[len - 1].value) {  
  190.                 return inputs[len - 1];  
  192.                 return this.createInputFile();  
  195.         return this.createInputFile();  
  197.     //forEach疊代函數  
  198.     forEach: function (/*數組*/arr, /*代理函數*/fn) {  
  199.         var len = arr.length;  
  200.         for (var i = 0; i < len; i++) {  
  201.             var tmp = arr[i];  
  202.             if (fn.call(tmp, i, tmp) == false) {  
  203.                 break;  
  207.     //送出上傳  
  208.     submitUpload: function () {  
  209.         var status = this.settings.onSubmitHandle(this.choseFilePath.length);  
  210.         if (typeof status === "boolean") {  
  211.             if (!status) {  
  215.         this.clearedNotChooseFile();  
  217.         dcmt.forms[0].submit();  
  219.     //檢查檔案是否可以上傳  
  220.     checkFileIsUpload: function (fileSuf, suffixs) {  
  221.         var status = false;  
  222.         this.forEach(suffixs, function (i, n) {  
  223.             if (fileSuf.toLowerCase() === n.toLowerCase()) {  
  224.                 status = true;  
  225.                 return false;  
  228.         return status;  
  230.     //檢查上傳的檔案是否已經存在上傳隊列中  
  231.     checkFileIsExist: function (/*目前上傳的檔案*/file) {  
  233.         this.forEach(this.choseFilePath, function (i, n) {  
  234.             if (n.value == file) {  
  241.     //清除未選擇檔案的上傳控件  
  242.     clearedNotChooseFile: function () {  
  243.         var files = this.getIframeContentDocument().getElementsByTagName("input");  
  244.         this.forEach(files, function (i, n) {  
  245.             if (!n.value) {  
  246.                 n.parentNode.removeChild(n);  
  251.     //将指定上傳的檔案從上傳隊列中删除  
  252.     removeFile: function (file) {  
  257.                 that.forEach(files, function (j, m) {  
  258.                     if (m.name == n.name) {  
  259.                         m.parentNode.removeChild(m);  
  260.                         return false;  
  263.                 that.choseFilePath.splice(i, 1);  
  268.     //清空上傳隊列  
  269.     clearUploadQueue: function () {  
  270.         this.choseFilePath.length = 0;  
  271.         this.getIframeContentDocument().forms[0].innerHTML = "";  
  273.     //選擇上傳檔案  
  274.     chooseFile: function () {  
  275.         var uploadfile;  
  276.         if (this.choseFilePath.length == this.settings.maximumFilesUpload) {  
  277.             if (this.settings.maximumFilesUpload <= 1) {  
  278.                 this.choseFilePath.length = 0;  
  279.                 var files = this.getIframeContentDocument().getElementsByTagName("input");  
  280.                 if (!files.length) {  
  281.                     uploadfile = this.getUploadInput();  
  282.                     $(uploadfile).click();  
  285.                     uploadfile = files[0];  
  293.         uploadfile = this.getUploadInput();  
  294.         $(uploadfile).click();  
  295.     }  
  296. };  
  297. //圖檔預覽操作  
  298. var perviewImage = {  
  299.     timers: [],  
  300.     closeImg: {  
  301.         before: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAOVSURBVHjaYtTUdGdAA4K/fv3U+Pv3rw+QLfT//3+Gf//+vWNiYtjCwsJyAyj2HiT2//8/sGKAAGJB1gkU9Pj581eNnJyctaamMgM/Py8DIyMDw+fPXxlu3rxfdfPmjaPMzIwtTEzMO2B6AAKIBaH5fw4LC1tHeHgQt7u7PYOOjhIDNzcb2IBfv/4x3LjxiGHr1n3WK1duXPPx45sKJiamKSB9AAHECPIC0GZ3ZmbWzQkJkazu7rYMLCyMDD9//gYZCzWcgYGVlRUozsxw9Oh5hv7+Gb8/fXrnC+TvBAggZhERZb7fv3/PdnCwV7C3twT69w+DlpYcw5s3HxkeP34FdP53IPsDg6qqNAMXFxvQIA4GoGXMFy9eVgK6eg1AADH9/ftbW0hIxEpFRQms0MBAlYGDg51BQ0OegZ2dneH58zdAMRUGKSlhBnFxQYY7dx4CvfSHQVBQyAqkFyCAmIWEFDOlpaVtgQHH8O7dB4aXLz8wqKjIMHBysoE1SUqKMCgoSIC90te3lGHNmu0MDx8+Yfjx4xvQmz9eAgQQCzAwhBiBIfX69RugwC+GR4+eAl3yliEx0Y+Bl5eDQU5ODBwG3d0LGdau3QH0AjMwLFiBruQEBjCTEEAAsYBC+du3HwxPnjxnAMY90JCfoLBlePXqLdAAabDNX778AHvl37+/QP9DYubfP0haAAggJlAi+fr1M8Pbt2+Bml4z8PBwMxQURDMoK0uDbf78+QfYJY2N2Qy2thZA//8CGsIMtOg70MI/7wACiAkYkluAfmH48+cPMOHwMbS1FTJoaspB/bwYqHE6w4cP3xn4+DgYWltzgAGqywCMNbABQBdsAQggJmAsX/3+/esxkPNAoX7jxgNQomKYMWMtw65dRxkuXLjGMHHiEobv338x3Lv3DEhDLAO6+hjQq1cBAohRWdkOqOGvOwcHz2Z1dU1WcXEJBgkJYYbbtx+AExIogH/9+s2gra0KDOgPwLTxmOHKlfO/v3z55AtM0jsBAggYjfKg0Lz769eP958/f7FnZ2djAyYUBhERQWBUcgLDhItBWFiY4f37j8AYeshw/frVr1++fCwFal4O8iZAAIENAKdpRoZTwLg99/Llc8VPnz7JffnyFWQwMAa+Mdy/fw+YmW4w3Lp1/eiPH19zgJqXwfIQQACBvQDNiaBsC/K/IDCQNICKfNjYWIVAYQNMH++AIb4FGPrg7IycgwECDADIUZC5UWvTuwAAAABJRU5ErkJggg==",  
  302.         after: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH1wwbFhkQHxvdFgAAArpJREFUeNplz1to1QUAx/HP/3/O2c7OrudsR8vmamOL2hw5LaQHgxKCLvQSRVgPFhJKo4cyMsmxKNQgfOuhfKxICQTpocvAIFhai/WSTNIcnK3pbu12tnO2cwsfbZ+H3+MXfgGbfURDgn0xHgiIFskUuPgOE/7njsBxahsYqAnDN1p3765N9/QIYzGL4+Myw8PlbC53fp23j5HZFBhgSxPft27f3tfX36+ure2O+sbKiitnzrg2MjK/xjNH+RUCeJbo41xsSyb3PtR/WLQuLhIGVAJKlEsUSyUBrp8966+xsdkl+o7zTwiP8mqSvffu6ZMLs+565YAVWRvL1xSWrpufvmHr/v3y1dVu30pHIuk4pxCEiCQ4nIyEYk15heakmm3bdR06Zrq0LjM3ruPNI+o7O8V7uy1NTkjV10vw4ns0Rw6Q7uCTdLwS1LfMyM+Mytxa0r73aVse2adp52Oau7pd/eGCq4MHNUxPKc4sy1dEylwOt3FPNUH09gTrWhILSr+d9N3pQfGGpHRXjz9/+tHoqRe0t8yqasyK1lKNKlrDdYpVCEqUixRLLBZTep98DkD7zofFO3pVGqlqJlJDDDEK4TkmQlbXc+QWGZ9P2TMwpHXHLpnL541+dVRtMuWp00NmGncpxCkUCLDGWDjJWp6LG0XmJtn6xOu2PrjLzUvn3fr6JdVXP3btmyNqGlN2vHbC/Dxry5SZ+pTfIyh3MN3Jyxt54cKVYYXVKZPn3peIFkTK5G5ckp34W+bLE7IjeWGOOT78gp8DQPwzBtt5dymkkqTmbuIpYnUEAblZsldIrLLB0AGeX2QlAEDD5xy7n7eWia2GlKsREhaIb9CEZS58wKFRplGJAGD9W36JMXwf9cmKdF1RIlGgrmS1zOU/GDjIyZv8iwoENguRQKqblnqiI8yUWUAWJQD4D4Cg/5i7WltRAAAAAElFTkSuQmCC"  
  304.     //擷取預覽元素  
  305.     getElementObject: function (elem) {  
  306.         if (elem.nodeType && elem.nodeType === 1) {  
  307.             return elem;  
  308.         } else {  
  309.             return document.getElementById(elem);  
  312.     //開始圖檔預覽  
  313.     beginPerview: function (/*檔案上傳控件執行個體*/file, /*需要顯示的元素id或元素執行個體*/perviewElemId,dcmt) {  
  314.         for (var t = 0; t < this.timers.length; t++) {  
  315.             window.clearInterval(this.timers[t]);  
  317.         this.timers.length = 0;  
  318.         var preview_div = this.getElementObject(perviewElemId);  
  319.         var MAXWIDTH = preview_div.clientWidth;  
  320.         var MAXHEIGHT = preview_div.clientHeight;  
  321.         if (file.files && file.files[0]) { //此處為Firefox，Chrome以及IE10的操作  
  322.             preview_div.innerHTML = "";  
  323.             var img = document.createElement("img");  
  324.             preview_div.appendChild(img);  
  325.             img.style.visibility = "hidden";  
  326.             img.onload = function () {  
  327.                 var rect = perviewImage.clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
  328.                 img.style.width = rect.width + 'px';  
  329.                 img.style.height = rect.height + 'px';  
  330.                 img.style.marginLeft = rect.left + 'px';  
  331.                 img.style.marginTop = rect.top + 'px';  
  332.                 img.style.visibility = "visible";  
  334.             var reader = new FileReader();  
  335.             reader.onload = function (evt) {  
  336.                 img.src = evt.target.result;  
  338.             reader.readAsDataURL(file.files[0]);  
  340.         else {//此處為IE6，7，8，9的操作  
  341.             file.select();  
  342.             var src = dcmt.selection.createRange().text;  
  343.             var div_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + src + "')";  
  344.             var img_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='" + src + "')";  
  346.             var img = document.createElement("div");  
  348.             img.style.filter = img_sFilter;  
  350.             img.style.width = "100%";  
  351.             img.style.height = "100%";  
  352.             function setImageDisplay() {  
  354.                 preview_div.innerHTML = "";  
  355.                 var div = document.createElement("div");  
  356.                 div.style.width = rect.width + 'px';  
  357.                 div.style.height = rect.height + 'px';  
  358.                 div.style.marginLeft = rect.left + 'px';  
  359.                 div.style.marginTop = rect.top + 'px';  
  360.                 div.style.filter = div_sFilter;  
  361.                 preview_div.appendChild(div);  
  363.             //圖檔加載計數  
  364.             var tally = 0;  
  365.             var timer = window.setInterval(function () {  
  366.                 if (img.offsetHeight != MAXHEIGHT) {  
  367.                     window.clearInterval(timer);  
  368.                     setImageDisplay()  
  370.                     tally++;  
  372.                 //如果超過兩秒鐘圖檔還不能加載，就停止目前的輪詢  
  373.                 if (tally > 20) {  
  378.             this.timers.push(timer);  
  381.     //按比例縮放圖檔  
  382.     clacImgZoomParam: function (maxWidth, maxHeight, width, height) {  
  383.         var param = { width: width, height: height };  
  384.         if (width > maxWidth || height > maxHeight) {  
  385.             var rateWidth = width / maxWidth;  
  386.             var rateHeight = height / maxHeight;  
  387.             if (rateWidth > rateHeight) {  
  388.                 param.width = maxWidth;  
  389.                 param.height = Math.round(height / rateWidth);  
  391.                 param.width = Math.round(width / rateHeight);  
  392.                 param.height = maxHeight;  
  395.         param.left = Math.round((maxWidth - param.width) / 2);  
  396.         param.top = Math.round((maxHeight - param.height) / 2);  
  397.         return param;  
  399.     //建立預覽元素  
  400.     createPreviewElement: function (/*上傳時的檔案名*/file, /*預覽時的樣式*/style) {  
  401.         style = style || { width: '100px', height: '100px', border: '1px solid #ebebeb' };  
  402.         var img = document.createElement("div");  
  403.         img.title = file;  
  404.         img.style.overflow = "hidden";  
  405.         for (var s in style) {  
  406.             img.style[s] = style[s];  
  408.         var text = document.createElement("div");  
  409.         text.style.width = style.width;  
  410.         text.style.overflow = "hidden";  
  411.         text.style.textOverflow = "ellipsis";  
  412.         text.style.whiteSpace = "nowrap";  
  413.         text.innerHTML = file;  
  414.         var top = 0 - window.parseInt(style.width) - 15;  
  415.         var right = 0 - window.parseInt(style.width) + 14;  
  416.         var close = document.createElement("img");  
  417.         close.setAttribute("filepath", file);  
  418.         close.src = this.closeImg.before;  
  419.         close.style.position = "relative";  
  420.         close.style.top = top + "px";  
  421.         close.style.right = right + "px";  
  422.         close.style.cursor = "pointer";  
  423.         var main = document.createElement("div");  
  424.         main.appendChild(img);  
  425.         main.appendChild(text);  
  426.         main.appendChild(close);  
  427.         return main;  
  429.     //擷取預覽區域  
  430.     getPerviewRegion: function (elem) {  
  431.         var perview = $(this.getElementObject(elem));  
  432.         if (!perview.find("ul").length) {  
  433.             var ul = document.createElement("ul");  
  434.             ul.style.listStyleType = "none";  
  435.             ul.style.margin = "0px";  
  436.             ul.style.padding = "0px";  
  437.             var div = document.createElement("div");  
  438.             div.style.clear = "both";  
  439.             perview.append(ul).append(div);  
  440.             return ul;  
  442.             return perview.children("ul").get(0);  

看看這個插件中的那個createIframe方法，對它做一點解釋

https://code.csdn.net/snippets/74821 https://code.csdn.net/snippets/74821/fork
  1. //建立iframe  
  19.         this.iframe.style.display = "none";  

大家應該都看到了這個方法中有一個html變量，它儲存的其實就是文章開頭的那段html。在這段html中我添加了一個function名為getDCMT的函數，這是為了擷取名為dynamic_creation_upload_iframe的iframe所在的document對象。在form中我也去掉了檔案上傳的input控件，這是因為我将動态建立input控件到這個form中，并且我會将這段html使用js的方式把它添加到一個動态建立的iframe中。為什麼要這樣呢？呵呵

我想聰明的你一定會明白的！

好了插件做好了，我們如何來使用呢？

首先 将那段插件js代碼儲存為notRefreshFilesUpload.js的檔案，友善在頁面上的引用，然後建構包含如下結構的page

https://code.csdn.net/snippets/74821 https://code.csdn.net/snippets/74821/fork
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title>files upload</title>  
  6.     <script src="Scripts/jquery-1.7.1.min.js"></script>  
  7.     <script src="Scripts/notRefreshFilesUpload.js"></script>  
  8.     <script>  
  9.         $(function () {  
  10.             var btn = $("#Button1");  
  11.             btn.uploadFile({  
  12.                 url: "WebForm1.aspx",  
  13.                 fileSuffixs: ["jpg", "png", "gif"],  
  14.                 buttonFeature: true,  
  15.                 errorText: "{0}",  
  16.                 maximumFilesUpload: 5,//最大檔案上傳數  
  17.                 onComplete: function (msg) {  
  18.                     $("#testdiv").html(msg);  
  19.                 },  
  20.                 perviewImageElementId: "fileList", //設定預覽圖檔的元素id  
  21.                 perviewImgStyle: { width: '100px', height: '100px', border: '1px solid #ebebeb' }//設定預覽圖檔的樣式  
  23.             var upload = btn.data("uploadFileData");  
  24.             $("#files").click(function () {  
  25.                 upload.submitUpload();  
  28.     </script>  
  29. </head>  
  30.     <body>  
  31.         <div style="width: 400px; height: 300px; float:left">  
  32.             <input id="Button1" type="button" value="選擇檔案" />  
  33.             <input id="files" type="button" value="上傳" />  
  34.             <div id="fileList" style="margin-top: 10px; padding-top:10px; border-top:1px solid #C0C0C0;font-size: 13px; width:400px">  
  35.             </div>  
  36.         </div>  
  37.         <div id="testdiv"></div>  
  38.     </body>  
  39. </html>  

上面的代碼中已經包含了圖檔預覽的功能，使用非常簡單我就不多言了，隻需要給定用于顯示圖檔的元素id即可，一般用div作為圖檔預覽的元素。

這是服務端的方法，在這裡我使用了aspx作為服務端的接收方式，當然你可以換成其他任何語言或形式作為服務端的處理方案（可以是php、jsp、mvc等等）

[csharp] 

https://code.csdn.net/snippets/74821 https://code.csdn.net/snippets/74821/fork
  1. public partial class WebForm1 : System.Web.UI.Page  
  2. {  
  3.     protected void Page_Load(object sender, EventArgs e)  
  4.     {  
  5.         List<string> filenames = new List<string>();  
  6.         HttpFileCollection files = Request.Files;  
  7.         for (int i = 0; i < files.Count; i++)  
  8.         {  
  9.             filenames.Add(files[i].FileName);  
  11.         Response.Write(string.Join("___", filenames));  
  12.         Response.Flush();  
  13.         Response.End();  

服務端代碼為多檔案上傳處理的方式，呵呵 也就是說這個插件也是支援多檔案上傳的，在服務端的代碼中我僅僅傳回了上傳檔案的名稱作為對用戶端的響應，當然你可以傳回任何你希望的形式，你隻需要在用戶端用js做相應處理即可（即在插件的complete這個回調中處理響應，它其中的msg回調參數将把服務端的響應結果回傳給你）。

好了 一個相容各種浏覽器，并且支援圖檔預覽和無重新整理異步上傳的純js插件就搞定了。上個圖看看效果

Web App開發 移動開發 javascript 前端開發 html5 記憶體技術 java php api c# 批量上傳插件 .js插件使用 插件批量 腳本使用批量 賬戶批量使用
上一篇: 面對大公司和小公司，應屆畢業生如何選擇
下一篇: AJAX伺服器異步通信

繼續閱讀