ASP. NET plug-in uploadify full use of batch file upload tutorial, asp. netuploadify
Uploadify provides a complete tutorial on uploading files in batches for your reference. The details are as follows:
1. First, prepare the uploadify js file.
2. upload page UpFilePage. aspx
Key code:
<Html xmlns =" http://www.w3.org/1999/xhtml "> <Head runat =" server "> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> Upload File </title> <link href ="/jquery. uploadify/uploadify.css "rel =" stylesheet "/> <script type =" text/javascript "src ="/jquery. uploadify/jquery-1.8.3.min.js> </script> <script src = "/jquery. uploadify/swfobject. js "charset =" UTF-8 "> </script> <script src ="/jquery. uploadify/jquery. uploadify. v2.1.0.js "> </script> <style type =" text/css "> # fileSave {padding-left: 5px; padding-right: 5px;} # fileSave. uploadifyQueueItem {width: 530px;} # fileQueue {padding-left: 5px; padding-right: 5px;} # fileQueue. uploadifyQueueItem {width: 530px;} # uploadifyUploader {position: absolute; opacity: 0 ;}. uploadify-button {height: 30px; line-height: 30px; width: pixel PX; text-align: center; border: 0px; margin-bottom: 5px; background: # ff6600; color: # fff ;}. cancel a {background: url (/jquery. uploadify/cancel.png) no-repeat center; display: inline-block; width: 16px; height: 16px ;} </style>
The GetFile () method in the background:
/// <Summary> /// obtain cookie Attachment Information /// </summary> /// <returns> </returns> protected string GetFile () {# region obtain cookie Attachment Information StringBuilder strHtml = new StringBuilder (); HttpCookie fileCookie = Request. cookies ["FileCookie"]; if (fileCookie! = Null) {string [] fileArray = new string [1]; if (fileCookie. value. contains ("|") fileArray = fileCookie. value. split ('|'); elsefileArray [0] = fileCookie. value; foreach (string objFile in fileArray) {if (! String. isNullOrEmpty (objFile) & objFile. contains (",") {string [] file = objFile. split (','); strHtml. append (@ "<div class = 'uploadifyqueueitem'>"); strHtml. append (@ "<div class = 'cancel'>"); strHtml. append ("<a href = 'javascript: deleteFile (\" "+ file [1] +" \ ") '> </a>"); // strHtml. append (@ " "); strHtml. append (@ "</div>"); strHtml. append (@ "<span class = 'filename'>" + HttpUtility. urlDecode (file [0]) + "</span> <span class = 'centage'>-100% </span> <div class = 'uploadifyss ss'>"); strHtml. append (@ "<div class = 'uploadifyprogressbar 'style = 'width: 100%;'>"); strHtml. append (@ "</div>"); strHtml. append (@ "</div>"); strHtml. append (@ "</div>") ;}} return strHtml. toString (); # endregion}
3. General handlers in the UploadAction Folder:
Public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; string operate = context. request ["operate"]; if (operate = "deleteFile") {# region delete file attachment information // obtain file path string filePath = context. server. mapPath (context. request ["file"]); // determines whether the object exists if (File. exists (filePath) File. delete (filePath); // Delete a file // obtain the attachment cookie information HttpCookie fileCookie = context. request. cookies ["FileCookie"]; string [] FileArray = new string [1]; if (fileCookie! = Null) {filePath = filePath. remove (0, filePath. indexOf ("upfiles ")). replace ("\", "/"); if (fileCookie. value. contains ("|") fileArray = fileCookie. value. split ('|'); elsefileArray [0] = fileCookie. value; string strFile = ""; for (int I = 0; I <fileArray. length; I ++) {if (! FileArray [I]. contains (filePath) strFile + = fileArray [I] + "|";} if (strFile. contains ("|") strFile = strFile. remove (strFile. length-1); fileCookie. value = strFile; fileCookie. expires = DateTime. now. addDays (1); fileCookie. httpOnly = true; context. response. appendCookie (fileCookie); StringBuilder strHtml = new StringBuilder (); if (fileCookie. value. contains ("|") fileArray = fileCookie. value. split ('|'); elsefil EArray [0] = fileCookie. Value; foreach (string objFile in fileArray) {if (! String. isNullOrEmpty (objFile) & objFile. contains (",") {string [] file = objFile. split (','); strHtml. append (@ "<div class = 'uploadifyqueueitem'>"); strHtml. append (@ "<div class = 'cancel'>"); strHtml. append ("<a href = 'javascript: deleteFile (\" "+ file [1] +" \ ") '> </a>"); // strHtml. append (@ " "); strHtml. append (@ "</div>"); strHtml. append (@ "<span class = 'Filename'> "+ HttpUtility. urlDecode (file [0]) + "</span> <span class = 'centage'>-100% </span> <div class = 'uploadifyss ss'>"); strHtml. append (@ "<div class = 'uploadifyprogressbar 'style = 'width: 100%;'>"); strHtml. append (@ "</div>"); strHtml. append (@ "</div>"); strHtml. append (@ "</div>") ;}} context. response. write (strHtml. toString () ;}# endregion} else if (operate = "GetFile") {# region obtains the uploaded attachment and displays the StringBuild Er strHtml = new StringBuilder (); HttpCookie fileCookie = context. Request. Cookies ["FileCookie"]; if (fileCookie! = Null) {string [] fileArray = new string [1]; if (fileCookie. value. contains ("|") fileArray = fileCookie. value. split ('|'); elsefileArray [0] = fileCookie. value; foreach (string objFile in fileArray) {if (! String. isNullOrEmpty (objFile) & objFile. contains (",") {string [] file = objFile. split (','); strHtml. append (@ "<div class = 'uploadifyqueueitem'>"); strHtml. append (@ "<div class = 'cancel'>"); strHtml. append ("<a href = 'javascript: deleteFile (\" "+ file [1] +" \ ") '>"); // strHtml. append (@ " </a> "); strHtml. append (@ "</div>"); strHtml. append (@ "<span class = 'filename'>" + HttpUtility. urlDecode (file [0]) + "</span> <span class = 'centage'>-100% </span> <div class = 'uploadifyss ss'>"); strHtml. append (@ "<div class = 'uploadifyprogressbar 'style = 'width: 100%;'>"); strHtml. append (@ "</div>"); strHtml. append (@ "</div>"); strHtml. append (@ "</div>") ;}} context. response. write (strHtml. toString (); # endregion }}
4. Upload the file uploadHandler. ashx general processing code. The file upload path can be set as needed:
Public void ProcessRequest (HttpContext context) {context. Response. ContentType = "text/plain"; HttpCookie fileCookie = context. Request. Cookies ["FileCookie"]; if (fileCookie! = Null) {string [] fileArray = new string [1]; if (fileCookie. value. contains ("|") fileArray = fileCookie. value. split ('|'); if (fileArray. length> = 5) return;} else {fileCookie = new HttpCookie ("FileCookie"); fileCookie. value = ""; context. response. cookies. add (fileCookie);} String aspxUrl = context. request. path. substring (0, context. request. path. lastIndexOf ("/") + 1); // file storage directory path String savePath = "/upfiles/"; // File Save the URLString saveUrl = "/upfiles/"; // if (context. Request. Cookies ["Member"]! = Null) // {// savePath + = context. request. cookies ["Member"] ["MemberId"] + "/"; // saveUrl + = context. request. cookies ["Member"] ["MemberId"] + "/"; //} string Member = Guid. newGuid (). toString (). trim (). replace ("-", ""); savePath + = Member + "/"; saveUrl + = Member + "/"; // define the file extension/* Hashtable extTable = new Hashtable (); extTable. add ("image", "gif, jpg, jpeg, png, bmp"); extTable. add ("flash", "swf, flv"); extTable. Add ("media", "swf, flv, mp3, wav, wma, wmv, mid, avi, mpg, asf, rm, rmvb, mp4"); extTable. add ("file", "doc, docx, xls, xlsx, ppt, htm, html, txt, zip, rar, gz, bz2, swf, flv, mp3, wav, wma, wmv, mid, avi, mpg, asf, rm, rmvb, mp4, wps "); * // maximum file size int maxSize = 5242880; HttpPostedFile imgFile = context. request. files ["imgFile"];/* if (imgFile = null) {showError ("select a file. ");} */String dirPath = context. Server. MapPath (savePath); if (! Directory. Exists (dirPath) {Directory. CreateDirectory (dirPath); // showError ("the upload Directory does not exist. ");} String dirName = context. Request. QueryString [" dir "]; if (String. IsNullOrEmpty (dirName) {dirName =" file ";}/* if (! ExtTable. ContainsKey (dirName) {showError ("the directory name is incorrect. ");} */String fileName = imgFile. fileName; String fileExt = Path. getExtension (fileName ). toLower ();/* if (String. isNullOrEmpty (fileExt) | Array. indexOf (String) extTable [dirName]). split (','), fileExt. substring (1 ). toLower () =-1) {showError ("the file extension is not allowed. \ N only supports the "+ (String) extTable [dirName]) +" format. ");} If (dirName. contains ("image") {if (imgFile. inputStream = null | imgFile. inputStream. length> maxSize) {showError ("the size of the uploaded file exceeds the limit of 5 MB. ") ;}} * // Create the folder dirPath + = dirName +"/"; saveUrl + = dirName +"/"; if (! Directory. exists (dirPath) {Directory. createDirectory (dirPath);} String ymd = DateTime. now. toString ("yyyyMMdd", DateTimeFormatInfo. invariantInfo); dirPath + = ymd + "/"; saveUrl + = ymd + "/"; if (! Directory. exists (dirPath) {Directory. createDirectory (dirPath);} String newFileName = DateTime. now. toString ("yyyyMMddHHmmss_ffff", DateTimeFormatInfo. invariantInfo) + fileExt; String filePath = dirPath + newFileName; imgFile. saveAs (filePath); String fileUrl = saveUrl + newFileName;/* Hashtable hash = new Hashtable (); hash ["error"] = 0; hash ["url"] = fileUrl; context. response. addHeader ("Content-Type", "text/ Html; charset = UTF-8 "); context. Response. Write (JsonMapper. ToJson (hash); context. Response. End (); */if (fileCookie! = Null) {string strFile = fileCookie. Value; if (! String. isNullOrEmpty (strFile) strFile = strFile + "|" + HttpUtility. urlEncode (fileName) + "," + fileUrl; elsestrFile = HttpUtility. urlEncode (fileName) + "," + fileUrl; fileCookie. value = strFile; fileCookie. expires = DateTime. now. addDays (1); fileCookie. httpOnly = true; context. response. appendCookie (fileCookie);} context. response. write ("1"); context. response. end ();}
5. After all the codes are completed, you can get the results:
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
