Jquery+ajaxfileupload上传文件

1、说明

　　ajaxfileupload.js是一款jQuery插件，用于通过ajax上传文件。

　　下载地址：https://files.cnblogs.com/files/lengzhan/ajaxfileupload.zip

2、使用方法

　　首先引用js脚本

?

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

 

?

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

<script type="text/javascript">     $(function () {         $("#btnUpload").on('click', DoUpload);     })       function DoUpload() {         var image = $("#txtPath").val();         if ($.trim(image) == "") {             alert("请选择文件！");             return;         }           $.ajaxFileUpload(         {             url: 'Handler/FileUploadHandler.ashx?type=Attachment',             secureuri: false,             fileElementId: $("#fleFile").attr("id"),             dataType: 'json',             success: function (data, status)             {                 if (data.url === "") {                     alert("上传失败！");                 } else {                     alert("上传成功！");                 }             },             error: function (result) {                 alert("上传失败！");             }         });     } </script>

　　然后是html代码

?

1 2 3 4 5 6 7 8 9

<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="选择" class="button" style="width: 60px;" />         <input id="btnUpload" type="button" value="上传" class="button" style="width: 60px;" />     </div> </div>

　　最后是一般处理程序

?

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 57

<%@ WebHandler Language="C#" Class="FileUploadHandler" %>   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 = "保存失败";                 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、图片上传

　　这里会把DEMO上传至博客园，下载地址：https://files.cnblogs.com/files/lengzhan/UploadAjaxFile.zip

特别注意：这里需要提醒一下各位，默认情况下可上传的最大文件为4M，如果要上传大于4M文件，那么需要在web.config中的httpRuntime元素中添加maxRequestLength属性设置大小，同时为了支持大文件上传超时可以添加executionTimeout属性设置超时时间

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