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