• 推荐
  • 评论
  • 收藏

asp.net+JQuery实现文件批量上传

2022-11-04    6677次浏览

做系统的时候难免会遇到需要批量上传这样的需求,之前一直没有做过,今天经理给了这个需求并简单讲了一下思路,花了点时间把它给做出来了,细想起来还是比较简单的。

思路:用JQuery来实现动态的添加或者删除多个上传控件(如<input type="file" name="fileUpload" runat="server" />),选择好上传的文件后,就可以一次性提交,避免了一个一个上传的麻烦。

下面是自己整的一个简单的demo

js部分的代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="multiUpload.aspx.cs" Inherits="multiUpload" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>批量上传</title>
    <script src="JS/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var count = 1;//上传组件个数
        $(function() {
           //添加上传组件
        $("#btnAdd").click(function() {
                if ($("#DivUploads").find(":button").length >= 7) {
                    alert('最多只能添加八个上传组件!');
                    return;
                }
                var strHtml = '<span><input type="file" name="fileUpload" runat="server" />';
                strHtml += "<input type='button' onclick='delUploadBtn(" + count + ")' value='删除'/></span>";
                $("#DivUploads").append(strHtml);
                count++;
            });
        });
        //删除上传组件
        function delUploadBtn(index) {
            $("#DivUploads").find(":button").each(function() {
                var text = "" + $(this).attr("onclick");
                if (text.indexOf("delUploadBtn(" + index + ")") != -1) {
                    $(this).parent().remove();
                }
            });  
       }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:FileUpload ID="FileUpload1" runat="server" />
    <input type="button" id="btnAdd" value="添加" />
    <div id="DivUploads" style="border:1px solid;300px;height:auto;">
    </div>
    <asp:Button ID="btnUpload" runat="server" Text="上传" onclick="btnUpload_Click" />
    </form>
</body>
</html>

asp.net的后台代码:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class multiUpload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    /// <summary>
    /// 上传处理
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void btnUpload_Click(object sender, EventArgs e)
    {
        string filepath = Request.Form["fileUpload"];
        string savePath = Server.MapPath("UploadFiles")+"\\";//上传文件保存路径 
        HttpFileCollection uploadFiles = Request.Files;
        for (int i = 0; i < uploadFiles.Count; i++)
        { 
            if (uploadFiles[i].FileName != "")
            {
                uploadFiles[i].SaveAs(savePath + uploadFiles[i].FileName);
            }
        }           
    }
}

还是整个运行的效果图:

客户端代码 
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UploadFile._Default" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml" >
 6 <head runat="server">
 7     <title>Upload Multiple Files in ASP.NET Using jQuery</title>
 8         <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
 9         <script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>
10 </head>
11 <body>
12     <form id="form1" runat="server">
13     <div>
14         <asp:TextBox ID="TextBox1" runat="server" Height="79px" TextMode="MultiLine"></asp:TextBox>
15         <asp:FileUpload ID="FileUpload1" runat="server" CssClass="multi" /><asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" />
16     </div>
17     
18     </form>
19 </body>
20 </html>
 

服务器端代码 
  1 using System;
  2 using System.Data;
  3 using System.Configuration;
  4 using System.Collections;
  5 using System.Web;
  6 using System.Web.Security;
  7 using System.Web.UI;
  8 using System.Web.UI.WebControls;
  9 using System.Web.UI.WebControls.WebParts;
 10 using System.Web.UI.HtmlControls;
 11 using System.IO;
 12 
 13 namespace UploadFile
 14 {
 15     /// <summary>
 16     /// 多个文件上传
 17     /// 涂聚文 QQ:463588883  www.dusystem.com
 18     /// </summary>
 19     public partial class _Default : System.Web.UI.Page
 20     {
 21 
 22         string fi;
 23         protected void Page_Load(object sender, EventArgs e)
 24         {
 25 
 26         }
 27         /// <summary>
 28         /// 
 29         /// </summary>
 30         /// <param name="sender"></param>
 31         /// <param name="e"></param>
 32         protected void btnUpload_Click(object sender, EventArgs e)
 33         {
 34             try
 35             {
 36                 //多个文件
 37                 
 38                 // Get the HttpFileCollection
 39                 HttpFileCollection hfc = Request.Files;
 40                 for (int i = 0; i < hfc.Count; i++)
 41                 {
 42                     
 43                     HttpPostedFile hpf = hfc[i];
 44                     if (hpf.ContentLength > 0)
 45                     {
 46                         string name=System.IO.Path.GetFileName(hpf.FileName);
 47                         if (name.Contains("."))
 48                         {
 49                             System.Random srd = new Random();
 50                             int srdName = srd.Next(1000);
 51                             name = name.Substring(name.LastIndexOf("."), name.Length - name.LastIndexOf("."));
 52                             name = DateTime.Now.ToString("yyyyMMddhhmmss") + srdName.ToString() + name;
 53                         }
 54                        // FileUpload2.PostedFile.SaveAs(Server.MapPath("upimge/") + name);
 55                         if (hfc.Count == 1)
 56                         {
 57                             fi = name;
 58                         }
 59                         if (hfc.Count!= 1)
 60                         {
 61                             //file += name;
 62                             fi += name+";";
 63                         }
 64                         //创造年,月,日的文件夹
 65                         //string year = DateTime.Now.Year.ToString();
 66                         //string month = DateTime.Now.Month.ToString();
 67                         //string day = DateTime.Now.Day.ToString();
 68                         //if (Directory.Exists("upload" + "\\" + year) == false)
 69                         //{
 70                         //    Directory.CreateDirectory("upload" + "\\" + year);
 71                         //}
 72                         //if (Directory.Exists("upload" + "\\" + year + "\\" + month) == false)
 73                         //{
 74                         //    Directory.CreateDirectory("upload" + "\\" + year + "\\" + month);
 75                         //}
 76                         //if (Directory.Exists("upload" + "\\" + year + "\\" + month + "\\" + day) == false)
 77                         //{
 78                         //    Directory.CreateDirectory("upload" + "\\" + year + "\\" + month + "\\" + day);
 79                         //}
 80                         //保存地址this.TextBox1.Text ="/" + year + "/" + month + "/" + day +"/"+name;
 81                         hpf.SaveAs(Server.MapPath("upload") + "\\" + name);
 82                         //hpf.SaveAs(Server.MapPath("upload") + "\\" + System.IO.Path.GetFileName(hpf.FileName));
 83                        // Response.Write("<b>File: </b>" + hpf.FileName + "  <b>Size:</b> " +
 84                             //hpf.ContentLength + "  <b>Type:</b> " + hpf.ContentType + " Uploaded Successfully <br/>");
 85                     }
 86                     this.TextBox1.Text = fi;
 87                 }
 88                 
 89             }
 90             catch (Exception ex)
 91             {
 92 
 93             }
 94         }
 95         /// <summary>
 96         /// 
 97         /// </summary>
 98         /// <param name="jsContent"></param>
 99         //protected void WriteJs(string jsContent)
100         //{
101 
102         //    ClientScript.RegisterStartupScript(this.GetType(), "writejs", "<script type='text/javascript'>" + jsContent + "</script>");
103         //}
104 
105 
106     }
107 }
 

jquery.MultiFile.js代码 
  1 /*
  2  ### jQuery Multiple File Upload Plugin v1.45 - 2009-04-22 ###
  3  * Home: http://www.fyneworks.com/jquery/multiple-file-upload/
  4  * Code: http://code.google.com/p/jquery-multifile-plugin/
  5  *
  6  * Dual licensed under the MIT and GPL licenses:
  7  *   http://www.opensource.org/licenses/mit-license.php
  8  *   http://www.gnu.org/licenses/gpl.html
  9  ###
 10 */
 11 
 12 /*# AVOID COLLISIONS #*/
 13 ;if(window.jQuery) (function($){
 14 /*# AVOID COLLISIONS #*/
 15  
 16     // plugin initialization
 17     $.fn.MultiFile = function(options){
 18         if(this.length==0) return this; // quick fail
 19         
 20         // Handle API methods
 21         if(typeof arguments[0]=='string'){
 22             // Perform API methods on individual elements
 23             if(this.length>1){
 24                 var args = arguments;
 25                 return this.each(function(){
 26                     $.fn.MultiFile.apply($(this), args);
 27     });
 28             };
 29             // Invoke API method handler
 30             $.fn.MultiFile[arguments[0]].apply(this, $.makeArray(arguments).slice(1) || []);
 31             // Quick exit...
 32             return this;
 33         };
 34         
 35         // Initialize options for this call
 36         var options = $.extend(
 37             {}/* new object */,
 38             $.fn.MultiFile.options/* default options */,
 39             options || {} /* just-in-time options */
 40         );
 41         
 42         // Empty Element Fix!!!
 43         // this code will automatically intercept native form submissions
 44         // and disable empty file elements
 45         $('form')
 46         .not('MultiFile-intercepted')
 47         .addClass('MultiFile-intercepted')
 48         .submit($.fn.MultiFile.disableEmpty);
 49         
 50         //### http://plugins.jquery.com/node/1363
 51         // utility method to integrate this plugin with others...
 52         if($.fn.MultiFile.options.autoIntercept){
 53             $.fn.MultiFile.intercept( $.fn.MultiFile.options.autoIntercept /* array of methods to intercept */ );
 54             $.fn.MultiFile.options.autoIntercept = null; /* only run this once */
 55         };
 56         
 57         // loop through each matched element
 58         this
 59          .not('.MultiFile-applied')
 60             .addClass('MultiFile-applied')
 61         .each(function(){
 62             //#####################################################################
 63             // MAIN PLUGIN FUNCTIONALITY - START
 64             //#####################################################################
 65             
 66        // BUG 1251 FIX: http://plugins.jquery.com/project/comments/add/1251
 67        // variable group_count would repeat itself on multiple calls to the plugin.
 68        // this would cause a conflict with multiple elements
 69        // changes scope of variable to global so id will be unique over n calls
 70        window.MultiFile = (window.MultiFile || 0) + 1;
 71        var group_count = window.MultiFile;
 72        
 73        // Copy parent attributes - Thanks to Jonas Wagner
 74        // we will use this one to create new input elements
 75        var MultiFile = {e:this, E:$(this), clone:$(this).clone()};
 76        
 77        //===
 78        
 79        //# USE CONFIGURATION
 80        if(typeof options=='number') options = {max:options};
 81        var o = $.extend({},
 82         $.fn.MultiFile.options,
 83         options || {},
 84                        ($.metadata? MultiFile.E.metadata(): ($.meta?MultiFile.E.data():null)) || {}, /* metadata options */
 85                                 {} /* internals */
 86        );
 87        // limit number of files that can be selected?
 88        if(!(o.max>0) /*IsNull(MultiFile.max)*/){
 89         o.max = MultiFile.E.attr('maxlength');
 90         if(!(o.max>0) /*IsNull(MultiFile.max)*/){
 91          o.max = (String(MultiFile.e.className.match(/\b(max|limit)\-([0-9]+)\b/gi) || ['']).match(/[0-9]+/gi) || [''])[0];
 92          if(!(o.max>0)) o.max = -1;
 93          else           o.max = String(o.max).match(/[0-9]+/gi)[0];
 94         }
 95        };
 96        o.max = new Number(o.max);
 97        // limit extensions?
 98        o.accept = o.accept || MultiFile.E.attr('accept') || '';
 99        if(!o.accept){
100         o.accept = (MultiFile.e.className.match(/\b(accept\-[\w\|]+)\b/gi)) || '';
101         o.accept = new String(o.accept).replace(/^(accept|ext)\-/i,'');
102        };
103        
104        //===
105        
106        // APPLY CONFIGURATION
107                             $.extend(MultiFile, o || {});
108        MultiFile.STRING = $.extend({},$.fn.MultiFile.options.STRING,MultiFile.STRING);
109        
110        //===
111        
112        //#########################################
113        // PRIVATE PROPERTIES/METHODS
114        $.extend(MultiFile, {
115         n: 0, // How many elements are currently selected?
116         slaves: [], files: [],
117         instanceKey: MultiFile.e.id || 'MultiFile'+String(group_count), // Instance Key?
118         generateID: function(z){ return MultiFile.instanceKey + (z>0 ?'_F'+String(z):''); },
119         trigger: function(event, element){
120          var handler = MultiFile[event], value = $(element).attr('value');
121          if(handler){
122           var returnValue = handler(element, value, MultiFile);
123           if( returnValue!=null ) return returnValue;
124          }
125          return true;
126         }
127        });
128        
129        //===
130        
131        // Setup dynamic regular expression for extension validation
132        // - thanks to John-Paul Bader: http://smyck.de/2006/08/11/javascript-dynamic-regular-expresions/
133        if(String(MultiFile.accept).length>1){
134                                 MultiFile.accept = MultiFile.accept.replace(/\W+/g,'|').replace(/^\W|\W$/g,'');
135         MultiFile.rxAccept = new RegExp('\\.('+(MultiFile.accept?MultiFile.accept:'')+')$','gi');
136        };
137        
138        //===
139        
140        // Create wrapper to hold our file list
141        MultiFile.wrapID = MultiFile.instanceKey+'_wrap'; // Wrapper ID?
142        MultiFile.E.wrap('<div class="MultiFile-wrap" id="'+MultiFile.wrapID+'"></div>');
143        MultiFile.wrapper = $('#'+MultiFile.wrapID+'');
144        
145        //===
146        
147        // MultiFile MUST have a name - default: file1[], file2[], file3[]
148        MultiFile.e.name = MultiFile.e.name || 'file'+ group_count +'[]';
149        
150        //===
151        
152                             if(!MultiFile.list){
153                                 // Create a wrapper for the list
154                                 // * OPERA BUG: NO_MODIFICATION_ALLOWED_ERR ('list' is a read-only property)
155                                 // this change allows us to keep the files in the order they were selected
156                                 MultiFile.wrapper.append( '<div class="MultiFile-list" id="'+MultiFile.wrapID+'_list"></div>' );
157                                 MultiFile.list = $('#'+MultiFile.wrapID+'_list');
158                             };
159        MultiFile.list = $(MultiFile.list);
160                             
161        //===
162        
163        // Bind a new element
164        MultiFile.addSlave = function( slave, slave_count ){
165                                 //if(window.console) console.log('MultiFile.addSlave',slave_count);
166                                 
167         // Keep track of how many elements have been displayed
168         MultiFile.n++;
169         // Add reference to master element
170         slave.MultiFile = MultiFile;
171                                 
172                                 // BUG FIX: http://plugins.jquery.com/node/1495
173                                 // Clear identifying properties from clones
174                                 if(slave_count>0) slave.id = slave.name = '';
175                                 
176         // Define element's ID and name (upload components need this!)
177         //slave.id = slave.id || MultiFile.generateID(slave_count);
178                                 if(slave_count>0) slave.id = MultiFile.generateID(slave_count);
179                                 //FIX for: http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=23
180         
181         // 2008-Apr-29: New customizable naming convention (see url below)
182         // http://groups.google.com/group/jquery-dev/browse_frm/thread/765c73e41b34f924#
183         slave.name = String(MultiFile.namePattern
184          /*master name*/.replace(/\$name/gi,$(MultiFile.clone).attr('name'))
185          /*master id  */.replace(/\$id/gi,  $(MultiFile.clone).attr('id'))
186          /*group count*/.replace(/\$g/gi,   group_count)//(group_count>0?group_count:''))
187          /*slave count*/.replace(/\$i/gi,   slave_count)//(slave_count>0?slave_count:''))
188         );
189         
190         // If we've reached maximum number, disable input slave
191         if( (MultiFile.max > 0) && ((MultiFile.n-1) > (MultiFile.max)) )//{ // MultiFile.n Starts at 1, so subtract 1 to find true count
192          slave.disabled = true;
193         //};
194         
195         // Remember most recent slave
196         MultiFile.current = MultiFile.slaves[slave_count] = slave;
197         
198                                 // We'll use jQuery from now on
199                                 slave = $(slave);
200         
201         // Clear value
202         slave.val('').attr('value','')[0].value = '';
203         
204                                 // Stop plugin initializing on slaves
205                                 slave.addClass('MultiFile-applied');
206                                 
207         // Triggered when a file is selected
208         slave.change(function(){
209           //if(window.console) console.log('MultiFile.slave.change',slave_count);
210                                   
211           // Lose focus to stop IE7 firing onchange again
212           $(this).blur();
213           
214           //# Trigger Event! onFileSelect
215           if(!MultiFile.trigger('onFileSelect', this, MultiFile)) return false;
216           //# End Event!
217           
218           //# Retrive value of selected file from element
219           var ERROR = '', v = String(this.value || ''/*.attr('value)*/);
220           
221           // check extension
222           if(MultiFile.accept && v && !v.match(MultiFile.rxAccept))//{
223             ERROR = MultiFile.STRING.denied.replace('$ext', String(v.match(/\.\w{1,4}$/gi)));
224            //}
225           //};
226           
227           // Disallow duplicates
228                                         for(var f in MultiFile.slaves)//{
229            if(MultiFile.slaves[f] && MultiFile.slaves[f]!=this)//{
230                                           //console.log(MultiFile.slaves[f],MultiFile.slaves[f].value);
231             if(MultiFile.slaves[f].value==v)//{
232              ERROR = MultiFile.STRING.duplicate.replace('$file', v.match(/[^\/\\]+$/gi));
233             //};
234            //};
235           //};
236           
237           // Create a new file input element
238           var newEle = $(MultiFile.clone).clone();// Copy parent attributes - Thanks to Jonas Wagner
239           //# Let's remember which input we've generated so
240           // we can disable the empty ones before submission
241           // See: http://plugins.jquery.com/node/1495
242           newEle.addClass('MultiFile');
243           
244           // Handle error
245           if(ERROR!=''){
246             // Handle error
247             MultiFile.error(ERROR);
248                                                 
249             // 2007-06-24: BUG FIX - Thanks to Adrian Wr骲el <adrian [dot] wrobel [at] gmail.com>
250             // Ditch the trouble maker and add a fresh new element
251             MultiFile.n--;
252             MultiFile.addSlave(newEle[0], slave_count);
253             slave.parent().prepend(newEle);
254             slave.remove();
255             return false;
256           };
257           
258           // Hide this element (NB: display:none is evil!)
259           $(this).css({ position:'absolute', top: '-3000px' });
260           
261           // Add new element to the form
262           slave.after(newEle);
263           
264           // Update list
265           MultiFile.addToList( this, slave_count );
266           
267           // Bind functionality
268           MultiFile.addSlave( newEle[0], slave_count+1 );
269           
270           //# Trigger Event! afterFileSelect
271           if(!MultiFile.trigger('afterFileSelect', this, MultiFile)) return false;
272           //# End Event!
273           
274         }); // slave.change()
275                                 
276                                 // Save control to element
277                                 $(slave).data('MultiFile', MultiFile);
278                                 
279        };// MultiFile.addSlave
280        // Bind a new element
281        
282        
283        
284        // Add a new file to the list
285        MultiFile.addToList = function( slave, slave_count ){
286         //if(window.console) console.log('MultiFile.addToList',slave_count);
287                                 
288         //# Trigger Event! onFileAppend
289         if(!MultiFile.trigger('onFileAppend', slave, MultiFile)) return false;
290         //# End Event!
291         
292         // Create label elements
293         var
294          r = $('<div class="MultiFile-label"></div>'),
295          v = String(slave.value || ''/*.attr('value)*/),
296          a = $('<span class="MultiFile-title" title="'+MultiFile.STRING.selected.replace('$file', v)+'">'+MultiFile.STRING.file.replace('$file', v.match(/[^\/\\]+$/gi)[0])+'</span>'),
297          b = $('<a class="MultiFile-remove" href="#'+MultiFile.wrapID+'">'+MultiFile.STRING.remove+'</a>');
298         
299         // Insert label
300         MultiFile.list.append(
301          r.append(b, ' ', a)
302         );
303         
304         b
305                                 .click(function(){
306          
307           //# Trigger Event! onFileRemove
308           if(!MultiFile.trigger('onFileRemove', slave, MultiFile)) return false;
309           //# End Event!
310           
311           MultiFile.n--;
312           MultiFile.current.disabled = false;
313           
314           // Remove element, remove label, point to current
315                                         MultiFile.slaves[slave_count] = null;
316                                         $(slave).remove();
317                                         $(this).parent().remove();
318                                         
319           // Show most current element again (move into view) and clear selection
320           $(MultiFile.current).css({ position:'', top: '' });
321                                         $(MultiFile.current).reset().val('').attr('value', '')[0].value = '';
322           
323           //# Trigger Event! afterFileRemove
324           if(!MultiFile.trigger('afterFileRemove', slave, MultiFile)) return false;
325           //# End Event!
326                                         
327           return false;
328         });
329         
330         //# Trigger Event! afterFileAppend
331         if(!MultiFile.trigger('afterFileAppend', slave, MultiFile)) return false;
332         //# End Event!
333         
334        }; // MultiFile.addToList
335        // Add element to selected files list
336        
337        
338        
339        // Bind functionality to the first element
340        if(!MultiFile.MultiFile) MultiFile.addSlave(MultiFile.e, 0);
341        
342        // Increment control count
343        //MultiFile.I++; // using window.MultiFile
344        MultiFile.n++;
345                             
346                             // Save control to element
347                             MultiFile.E.data('MultiFile', MultiFile);
348                             
349 
350             //#####################################################################
351             // MAIN PLUGIN FUNCTIONALITY - END
352             //#####################################################################
353         }); // each element
354     };
355     
356     /*--------------------------------------------------------*/
357     
358     /*
359         ### Core functionality and API ###
360     */
361     $.extend($.fn.MultiFile, {
362   /**
363    * This method removes all selected files
364    *
365    * Returns a jQuery collection of all affected elements.
366    *
367    * @name reset
368    * @type jQuery
369    * @cat Plugins/MultiFile
370    * @author Diego A. (http://www.fyneworks.com/)
371    *
372    * @example $.fn.MultiFile.reset();
373    */
374   reset: function(){
375             var settings = $(this).data('MultiFile');
376             //if(settings) settings.wrapper.find('a.MultiFile-remove').click();
377             if(settings) settings.list.find('a.MultiFile-remove').click();
378    return $(this);
379   },
380   
381   
382   /**
383    * This utility makes it easy to disable all 'empty' file elements in the document before submitting a form.
384    * It marks the affected elements so they can be easily re-enabled after the form submission or validation.
385    *
386    * Returns a jQuery collection of all affected elements.
387    *
388    * @name disableEmpty
389    * @type jQuery
390    * @cat Plugins/MultiFile
391    * @author Diego A. (http://www.fyneworks.com/)
392    *
393    * @example $.fn.MultiFile.disableEmpty();
394    * @param String class (optional) A string specifying a class to be applied to all affected elements - Default: 'mfD'.
395    */
396   disableEmpty: function(klass){ klass = String(klass || 'mfD');
397    var o = [];
398    $('input:file').each(function(){ if($(this).val()=='') o[o.length] = this; });
399    return $(o).each(function(){ this.disabled = true }).addClass(klass);
400   },
401   
402   
403  /**
404   * This method re-enables 'empty' file elements that were disabled (and marked) with the $.fn.MultiFile.disableEmpty method.
405   *
406   * Returns a jQuery collection of all affected elements.
407   *
408   * @name reEnableEmpty
409   * @type jQuery
410   * @cat Plugins/MultiFile
411   * @author Diego A. (http://www.fyneworks.com/)
412   *
413   * @example $.fn.MultiFile.reEnableEmpty();
414   * @param String klass (optional) A string specifying the class that was used to mark affected elements - Default: 'mfD'.
415   */
416   reEnableEmpty: function(klass){ klass = String(klass || 'mfD');
417    return $('input:file.'+klass).removeClass(klass).each(function(){ this.disabled = false });
418   },
419   
420   
421  /**
422   * This method will intercept other jQuery plugins and disable empty file input elements prior to form submission
423   *
424 
425   * @name intercept
426   * @cat Plugins/MultiFile
427   * @author Diego A. (http://www.fyneworks.com/)
428   *
429   * @example $.fn.MultiFile.intercept();
430   * @param Array methods (optional) Array of method names to be intercepted
431   */
432   intercepted: {},
433   intercept: function(methods, context, args){
434    var method, value; args = args || [];
435    if(args.constructor.toString().indexOf("Array")<0) args = [ args ];
436    if(typeof(methods)=='function'){
437     $.fn.MultiFile.disableEmpty();
438     value = methods.apply(context || window, args);
439                 //SEE-http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=27
440                 setTimeout(function(){ $.fn.MultiFile.reEnableEmpty() },1000);
441     return value;
442    };
443    if(methods.constructor.toString().indexOf("Array")<0) methods = [methods];
444    for(var i=0;i<methods.length;i++){
445     method = methods[i]+''; // make sure that we have a STRING
446     if(method) (function(method){ // make sure that method is ISOLATED for the interception
447      $.fn.MultiFile.intercepted[method] = $.fn[method] || function(){};
448      $.fn[method] = function(){
449       $.fn.MultiFile.disableEmpty();
450       value = $.fn.MultiFile.intercepted[method].apply(this, arguments);
451                         //SEE-http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=27
452       setTimeout(function(){ $.fn.MultiFile.reEnableEmpty() },1000);
453       return value;
454      }; // interception
455     })(method); // MAKE SURE THAT method IS ISOLATED for the interception
456    };// for each method
457   }
458  });
459     
460     /*--------------------------------------------------------*/
461     
462     /*
463         ### Default Settings ###
464         eg.: You can override default control like this:
465         $.fn.MultiFile.options.accept = 'gif|jpg';
466     */
467     $.fn.MultiFile.options = { //$.extend($.fn.MultiFile, { options: {
468         accept: '', // accepted file extensions
469         max: -1,    // maximum number of selectable files
470         
471         // name to use for newly created elements
472         namePattern: '$name', // same name by default (which creates an array)
473         
474         // STRING: collection lets you show messages in different languages
475         STRING: {
476             remove:'x',
477             denied:'You cannot select a $ext file.\nTry again...',
478             file:'$file',
479             selected:'File selected: $file',
480             duplicate:'This file has already been selected:\n$file'
481         },
482         
483         // name of methods that should be automcatically intercepted so the plugin can disable
484         // extra file elements that are empty before execution and automatically re-enable them afterwards
485   autoIntercept: [ 'submit', 'ajaxSubmit', 'ajaxForm', 'validate' /* array of methods to intercept */ ],
486         
487         // error handling function
488         error: function(s){
489             /*
490             ERROR! blockUI is not currently working in IE
491             if($.blockUI){
492                 $.blockUI({
493                     message: s.replace(/\n/gi,'<br/>'),
494                     css: { 
495                         border:'none', padding:'15px', size:'12.0pt',
496                         backgroundColor:'#900', color:'#fff',
497                         opacity:'.8','-webkit-border-radius': '10px','-moz-border-radius': '10px'
498                     }
499                 });
500                 window.setTimeout($.unblockUI, 2000);
501             }
502             else//{// save a byte!
503             */
504              alert(s);
505             //}// save a byte!
506         }
507  }; //} });
508     
509     /*--------------------------------------------------------*/
510     
511     /*
512         ### Additional Methods ###
513         Required functionality outside the plugin's scope
514     */
515     
516     // Native input reset method - because this alone doesn't always work: $(element).val('').attr('value', '')[0].value = '';
517     $.fn.reset = function(){ return this.each(function(){ try{ this.reset(); }catch(e){} }); };
518     
519     /*--------------------------------------------------------*/
520     
521     /*
522         ### Default implementation ###
523         The plugin will attach itself to file inputs
524         with the class 'multi' when the page loads
525     */
526     $(function(){
527   //$("input:file.multi").MultiFile();
528   $("input[type=file].multi").MultiFile();
529  });
530     
531     
532     
533 /*# AVOID COLLISIONS #*/
534 })(jQuery);
535 /*# AVOID COLLISIONS #*/
536 

原文地址:https://www.cnblogs.com/Leo_wl/p/1970521.html