C # File Upload (multiple files can be uploaded ),

C # File Upload (multiple files can be uploaded ),
I. frontend Construction

1. Front-end js: uploadify (: http://www.uploadify.com/download/), layer (: http://layer.layui.com/), download them and put them in your project as shown in

　　　　

2. Create a directory column for uploading files as needed in your project)

End of front-end construction

2. modify the configuration file (skip this step)

1. First, you can skip this step. This step is mainly to modify the size limit of the uploaded file (. net can only upload up to 4 MB by default). If you need to modify the size, please continue to read this step.

2. Open the web. config configuration file and find the <system. web> node. Add the following nodes under the node:

<HttpRuntime targetFramework = "4.5" executionTimeout = "500" maxRequestLength = "409600" timeout = "false" minFreeThreads = "8" minLocalRequestFreeThreads = "4" appRequestQueueLimit = "100

<! -- The maxRequestLength attribute is the size of the uploaded file. The value is kb. maxRequestLength = "1024" indicates the maximum size of 1 MB. -->

Iii. Coding

1. Note: I am using the mvc mode, so I will write it in the mvc mode here (the Code remains unchanged and developers can write it according to your design mode)

2. Create a controller PageBaseController and write the following code in the Controller (if the aspx page is used, delete the FileUpdateView method, change the ActionResult of the UploadifyFile method to void, and remove return null ;)

The backend code is as follows:

1 /// <summary> 2 // file upload page 3 /// </summary> 4 /// <returns> </returns> 5 public ActionResult FileUpdateView () 6 {7 return View (); 8} 9 10 /// <summary> 11 // File Processing Method 12 /// </summary> 13 /// <param name = "filedata"> </param> 14 // <returns> </returns> 15 public ActionResult UploadifyFile (HttpPostedFileBase filedata) 16 {17 if (filedata = null | 18 String. isNullOrEmpty (filedata. fileName) | 19 filedata. C OntentLength = 0) 20 {21 return HttpNotFound (); 22} 23 24 string filename = System. IO. path. getFileName (filedata. fileName); 25 string virtualPath = String. format ("~ /File/{0} ", filename); 26 27 string path = Server. mapPath (virtualPath); 28 // the following comments of the code can get file attributes 29 // System. diagnostics. fileVersionInfo info = System. diagnostics. fileVersionInfo. getVersionInfo (path); 30 // FileInfo file = new FileInfo (filedata. fileName); 31 32 filedata. saveAs (path); 33 return null; 34}

View Code

Note: virtualPath is the directory for uploading files.

3. Reference The js: uploadfiy and layer paths in the view (page ).

Example:

<Script src = "~ /Scripts/jquery-1.10.2.js "> </script>
<Script src = "~ /Scripts/lib/layer. js "> </script>
<Link href = "~ /Scripts/lib/uploadify/uploadify.css "rel =" stylesheet "/>
<Script src = "~ /Scripts/jquery-1.10.2.min.js "> </script>
<Script src = "~ /Scripts/lib/uploadify/jquery. uploadify. min. js "> </script>

Note: jquery is used here.

4. Front-end code

1 <script type = "text/javascript"> 2 var uploadifyOnSelectError; 3 var uploadifyOnUploadError; 4 var uploadifyOnSelect; 5 var variables; 6 uploadifyOnSelectError = function (file, errorCode, errorMsg) {7 var msgText = "Upload Failed \ n"; 8 switch (errorCode) {9 case SWFUpload. QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: 10 // this. queueData. errorMsg = "upload at most each time" + this. settings. queueSizeLimit + "Files"; 11 msgText + = "upload at most each time" + this. settings. queueSizeLimit + "Files"; 12 break; 13 case SWFUpload. QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: 14 msgText + = "the file size exceeds the limit (" + this. settings. fileSizeLimit + ")"; 15 break; 16 case SWFUpload. QUEUE_ERROR.ZERO_BYTE_FILE: 17 msgText + = "the file size is 0"; 18 break; 19 case SWFUpload. QUEUE_ERROR.INVALID_FILETYPE: 20 msgText + = "the file format is incorrect. Only" + this. settings. fileTypeExts; 21 break; 22 default: 23 msgText + = "error code:" + errorCode + "\ n" + errorMsg; 24} 25 layer. msg (msgText); 26}; 27 uploadifyOnUploadError = function (file, errorCode, errorMsg, errorString) {28 // The prompt 29 if (errorCode = SWFUpload. UPLOAD_ERROR.FILE_CANCELLED30 | errorCode = SWFUpload. UPLOAD_ERROR.UPLOAD_STOPPED) {31 return; 32} 33 var msgText = "Upload Failed \ n"; 34 switch (errorCode) {35 case SWFUpload. UPLOAD_ERROR.HTTP_ERROR: 36 msgText + = "HTTP Error \ n" + errorMsg; 37 break; 38 case SWFUpload. UPLOAD_ERROR.MISSING_UPLOAD_URL: 39 msgText + = "the upload file is missing. please upload it again"; 40 break; 41 case SWFUpload. UPLOAD_ERROR.IO_ERROR: 42 msgText + = "IO error"; 43 break; 44 case SWFUpload. UPLOAD_ERROR.SECURITY_ERROR: 45 msgText + = "security error \ n" + errorMsg; 46 break; 47 case SWFUpload. UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: 48 msgText + = "maximum upload each time" + this. settings. uploadLimit + "count"; 49 break; 50 case SWFUpload. UPLOAD_ERROR.UPLOAD_FAILED: 51 msgText + = errorMsg; 52 break; 53 case SWFUpload. UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND: 54 msgText + = "the specified file cannot be found. Please operate again"; 55 break; 56 case SWFUpload. UPLOAD_ERROR.FILE_VALIDATION_FAILED: 57 msgText + = "parameter error"; 58 break; 59 default: 60 msgText + = "file:" + file. name + "\ n Error Code:" + errorCode + "\ n" 61 + errorMsg + "\ n" + errorString; 62} 63 layer. msg (msgText); 64}; 65 66 uploadifyOnSelect = function () {67}; 68 uploadifyOnUploadSuccess = function (file, data, response) {69 layer. msg (file. name + "\ n" + response + "\ n" + data); 70}; 71 $ (function () {72 73 $ ("# uploadify "). uploadify ({74 uploader: '/PageBase/UploadifyFun', // method 75 swf: '/Scripts/lib/uploadify/uploadify.swf', 76 width: 80, // button width 77 height: 60, // button height 78 buttonText: "Upload File", 79 buttonCursor: 'hand', 80 fileSizeLimit: 20480, 81 fileobjName: 'filedata ', 82 fileTypeExts :'*. xlsx ;*. docx', // file extension 83 fileTypeDesc: "Please select xslx, docx file", // file description 84 auto: false, // whether to automatically upload 85 multi: true, // check whether multiple objects can be selected at a time. 86 queueSizeLimit: 5, // The number of objects that can be uploaded simultaneously is 87 overrideEvents: ['onselecterror ', 'ondialogclose'], // whether to enable the default message: 88 onSelect: uploadifyOnSelect, 89 onSelectError: uploadifyOnSelectError, 90 onUploadError: uploadifyOnUploadError, 91 onUploadSuccess: Success}); 93 }); 94 </script> 95 <span id = "uploadify"> </span> 96 <div> 97 <a href = "javascript: $ ('# uploadify '). uploadify ('upload', '*'); "> upload </a> 98 <a href =" javascript: $ ('# uploadify '). uploadify ('cancel', '*'); "> cancel </a> 99 </div>

View Code

Note: The fileSizeLimit attribute value should be the same as the file upload maximum value set in our web. config (it cannot be greater than this value)

Here. Our file upload is complete.

If you like my articles, follow me. If you have any questions, leave a message.