文件上传简单实现是非常容易的,但是想要更高的要求,比如通过ajax上传文件、一次上传多个文件、文件比较大等等,这里面的坑就不是很容易填(对于新手来说)。因此在这里我准备通过ajax实现多文件上传。在开始贴代码之前,要注意几点:
1.<input type="file" />是必须要加name的,不知道为什么不加name属性,后台获取不到文件数据(有办法的大神可以在评论区提醒我),然后是multiple属性,当multiple="multiple"时,file控件是可以多选需要上传的文件的(<input type="file" multiple="multiple" name="myFile" />)。
2.form要设enctype为multiple/form-data,multipart/form-data表示:不对字符编码,在使用包含文件上传控件的表单时,必须使用该值。
3.重点来了,ajax的参数设置里面有大坑(很多人都没注意ajax的众多参数),contentType和processData需要设为false,contentType明明被要求为string类型,但是这里要设为false(我也不知道为什么),网上关于contentType的说明大多是"contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合",还有个data要设为new FormData($(' ')[0]),想了解其他参数的可看这个
下面就是简单的前台代码:
1
2
3
4
|
< form id = "uploadForm" enctype = "multipart/form-data" action = "/Login/uploadFile" method = "post" > < input type = "file" multiple = "multiple" id = "PersonFile" name = "MyFile" /> < button type = "button" id = "submitFile" onclick = "uploadFile()" >提交</ button > </ form > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//上传文件 function uploadFile() { debugger $.ajax({ url: '/Login/uploadFile' , type: 'POST' , cache: false , data: new FormData($( '#uploadForm' )[0]), processData: false , // 关键点 contentType: false , // 关键点 success: function (result) { if (result.Check) { alert( "成功" ); } else { alert( "失败" ); } var file = $( "#PersonFile" ) file.after(file.clone().val( "" )); file.remove(); } }); } |
现在轮到后台了,我这边后台是通过System.Web.HttpContext.Current.Request.Files获取文件数据集的,之后的代码我将以图片为例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
[HttpPost] public ActionResult uploadFile() { Result< string > check = new Result< string >(); try { HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; int number = 0; for ( int i = 0; i < files.Count; i++) { System.Text.StringBuilder fileName = new System.Text.StringBuilder(); fileName.Append( @"D:\" ); fileName.Append(DateTime.Now.ToString( "yyMMdd" )); fileName.Append( @"\" ); if (!System.IO.Directory.Exists(fileName.ToString())) { System.IO.Directory.CreateDirectory(fileName.ToString()); } fileName.Append(System.IO.Path.GetFileNameWithoutExtension(files[i].FileName)); fileName.Append(DateTime.Now.ToString( "yyMMddHHmmss" )); fileName.Append(System.IO.Path.GetExtension(files[i].FileName)); System.IO.Stream sm = files[i].InputStream; if (System.IO.File.Exists( @"D:\水印log.jpg" )) { ImageHelper.ZoomAuto(sm, fileName.ToString(), 400, 300, "" , @"D:\水印log.jpg" ); } else { ImageHelper.ZoomAuto(sm, fileName.ToString(), 400, 300, "水印LOG" , "" ); } bool ok = System.IO.File.Exists(fileName.ToString()); if (ok) { number++; } } if (number.Equals(files.Count)) { check.Message = "上传成功!" ; check.Check = true ; } else { check.Message = "失败!" ; check.Check = false ; } return Json(check); } catch (Exception ex) { check.Message = ex.ToString(); check.Check = false ; return Json(check); } } |
1
2
3
4
5
6
7
8
9
|
/// <summary> /// 返回值 /// </summary> public class Result<T> { public string Message { get ; set ; } public bool Check { get ; set ; } public IList<T> ResultList { get ; set ; } } |
其中用到了ImageHelper.ZoomAuto(),这个是吴剑大哥写的图片处理类,地址http://www.cnblogs.com/wu-jian/archive/2011/02/21/1959382.html。最后还有一个坑,就是asp.net对一次上传数据的大小是有限制的,要解除限制才能10个20个文件同时上传。如何解除限制?在web.config里面配置一下就OK了。代码如下:
1
2
3
4
5
6
|
<system.web> <authentication mode= "None" /> <compilation debug= "true" targetFramework= "4.5" /> <!--<httpRuntime targetFramework= "4.5" />--> <httpRuntime executionTimeout= "500" maxRequestLength= "409600" useFullyQualifiedRedirectUrl= "false" minFreeThreads= "8" minLocalRequestFreeThreads= "4" appRequestQueueLimit= "100" /> </system.web> |
把<httpRuntime >放<system.web>节点下。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。