File upload simple implementation is very easy, but want higher requirements, such as uploading files through Ajax, upload multiple files at a time, file size, etc., this hole is not very easy to fill (for beginners). So here I'm going to implement multiple file uploads via Ajax. Before you start pasting code, note a few things:
1.<input type= "File"/> is required to add name, do not know why not add the Name property, the background can not get the file data (there is a way to the great God to remind me in the comment area), and then the multiple attribute, when multiple= " Multiple ", the file control can be multiple-select files that need to be uploaded (<input type=" file "multiple=" multiple "name=" MyFile "/>).
2.form to set Enctype to Multiple/form-data,multipart/form-data: No character encoding, you must use this value when you use a form that contains a file upload control. For a detailed explanation of enctype you can view the http://www.jb51.net/web/165444.html
3. The key point is that the Ajax parameters are set inside the big hole (many people do not notice many of the Ajax parameters), contenttype and ProcessData need to be set to False,contenttype is clearly required for string type, But this is set to False (I do not know why), the online description of ContentType is mostly "ContentType: Requirements for String type parameters, when sending information to the server, the content encoding type defaults to" application/ X-www-form-urlencoded ". The default value is suitable for most applications, and there is a data to be set to new FormData ($ (') [0]), to see what other parameters can be seen in this http://www.jb51.net/article/95425.htm.
Here is the simple foreground code:
<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 ()" > Submit </button>
</form>
Upload file
function uploadfile () {
debugger
$.ajax ({
URL: '/login/uploadfile ',
type: ' POST ',
Cache:false,
data:new FormData ($ (' #uploadForm ') [0]),
processdata:false,//Key point
contenttype:false,/ /Key point
success:function {
if (result). Check) {
alert ("successful");
}
else {
alert ("failed");
}
var file = $ ("#PersonFile")
File.after (File.clone (). Val (""));
File.remove ();}}
);
Now the turn backstage, I this side backstage is obtains the file data set through the System.Web.HttpContext.Current.Request.Files, after the code I will take the picture for example.
[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:\ watermark log.jpg")) {Imagehelper.zoomauto (SM, filename.tostring (), MB, "", @ "d:\ watermark Log
. jpg "); else {Imagehelper.zoomauto (SM, Filename.tostring (), 400, 300, "Watermark Log", "");
bool OK = System.IO.File.Exists (filename.tostring ());
if (OK) {number++; } if (number. Equals (Files. Count)) {check. message = "Upload success!"
"; Check.
Check = true; } else {check. Message = "Failed!"
"; Check.
Check = false;
return Json (check); The catch (Exception ex) {check. Message = ex.
ToString (); Check.
Check = false;
return Json (check);
}
}
<summary>
///return value
///</summary> public
class result<t>
{public
string message {get; set;}
public bool Check {get; set;}
Public ilist<t> resultlist {get; set;}
}
Which used the Imagehelper.zoomauto (), this is Wu Jian wrote the image processing class, address http://www.cnblogs.com/wu-jian/archive/2011/02/21/1959382.html. Finally there is a hole, that is, asp.net the size of the upload data is limited, to remove the limit to 10 20 files at the same time upload. How do I unlock restrictions? It's OK to configure it inside the web.config. The code is as follows:
<system.web>
<authentication mode= "None"/>
<compilation debug= "true" targetframework= " 4.5 "/>
<!--
Put the
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.