Jquery + ajaxfileupload Upload File, ajaxfileupload

Jquery + ajaxfileupload Upload File, ajaxfileupload

1. Description

Ajaxfileupload. js is a jQuery plug-in used to upload files through ajax.

: Http://files.cnblogs.com/files/lengzhan/ajaxfileupload.zip

2. Usage

Reference js scripts first

    <script src="Scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>    <script src="Scripts/ajaxfileupload.js" type="text/javascript"></script>

 

<Script type = "text/javascript"> $ (function () {$ ("# btnUpload "). on ('click', DoUpload);}) function DoUpload () {var image = $ ("# txtPath "). val (); if ($. trim (image) = "") {alert ("select a file! "); Return ;}$. ajaxFileUpload ({url: 'handler/FileUploadHandler. ashx? Type = Attachment ', secureuri: false, fileElementId: $ ("# fleFile "). attr ("id"), dataType: 'json', success: function (data, status) {if (data. url = "") {alert ("Upload Failed! ");} Else {alert (" Upload successful! ") ;}}, Error: function (result) {alert (" Upload Failed! ") ;}}) ;}</Script>

Then the html code

<Div id = "ImageMaintain"> <input type = "hidden" name = "hidImgUrl" id = "hidImgUrl" value = ""/> <div id = "uploadarea"> <input id = "txtPath" type = "text" disabled = "disabled"/> <input id = "fleFile" type = "file" name = "fleFile" onchange = "document. getElementById ('txtpath '). value = this. value; return false; "/> <input id =" btnSelect "type =" button "value =" select "class =" button "> <% @ WebHandler Language =" C # "Class =" FileUpl OadHandler "%> using System; using System. web; using System. IO; public class FileUploadHandler: IHttpHandler {public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; string strMessage = string. empty; string strUrl = string. empty; string strFloderName = "Upload"; string strNewFilePath = string. empty; string strFileName = Path. getFileName (context. request. files [0]. FileName); string strOldFileName = Path. getFileName (context. request. files [0]. fileName); int intFileSize = context. request. files [0]. contentLength; string data = ""; if (context. request. files. count> 0 & strFileName! = "") {String strExt = Path. getExtension (context. request. files [0]. fileName); strExt = strExt. trimStart ('. '). toLower (); strFloderName = strFloderName + "/" + "File/" + DateTime. now. toString ("yyyyMMdd"); string path = HttpContext. current. server. mapPath (".. /"+ strFloderName); try {strFileName = Guid. newGuid (). toString () + (". "+ strExt); if (! Directory. exists (path) {Directory. createDirectory (path);} strNewFilePath = Path. combine (path, strFileName); context. request. files [0]. saveAs (strNewFilePath);} catch (Exception ex) {strMessage = "failed to save"; strUrl = string. empty ;}} strMessage = ""; strUrl = strFloderName + "/" + strFileName; data = "{\" strUrl \ ": \" "+ strUrl + "\", \ "strMessage \": \ "" + strMessage + "\"} "; context. response. write (data); context. response. end () ;}public bool IsReusable {get {return false ;}}}

3. upload images

Here the DEMO will be uploaded to the blog Park,: http://files.cnblogs.com/files/lengzhan/UploadAjaxFile.zip

Note: The maximum file size that can be uploaded is 4 MB by default. to upload a file larger than 4 MB. add the maxRequestLength attribute to the httpRuntime element in config to set the size. You can also add the executionTimeout attribute to support large file upload timeout.

<HttpRuntime useFullyQualifiedRedirectUrl = "true" executionTimeout = "120" maxRequestLength = "20480"/> 20480 = 20 M