ajax上传图片

js源码：

[javascript] 
  1. /// <reference path="jquery-1.8.3.js" />  
  2. /// <reference path="ajaxForm/jquery.form.js" />  
  3.   
  4. /*! 
  5.  * jQuery upload 
  6.  * 用于上传单个文件，上传成功后,返回文件路径。 
  7.  * 本插件依赖jQuery，jquery.form 请在使用时引入依赖的文件 
  8.  * 
  9.  * Date: 2014/4/23 
  10.  */  
  11. /* 
  12. 使用: 
  13. html: 
  14. <div style=" 100%; float: left;"> 
  15.     <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" /> 
  16.     <div class="imgdiv"></div> 
  17.     <span class="img_span"> 
  18.         <input type="file" name="file" /> 
  19.     </span> 
  20.       
  21.     <input type="button" value="上传" class="upload" /> 
  22. </div> 
  23. <div style=" 100%; float: left;"> 
  24.     <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" /> 
  25.     <div class="imgdiv"></div> 
  26.     <span class="img_span"> 
  27.         <input type="file" name="file" /> 
  28.     </span> 
  29.       
  30.     <input type="button" value="上传" class="upload" /> 
  31. </div> 
  32.  
  33. js: 
  34.  
  35. $(document).ready(function () { 
  36.          
  37.     //$(".upload").upload({ 
  38.     //    uploadData: { id: "12233" }, 
  39.     //    successFn: function (response, statusText, xhr, $this) { 
  40.     //        alert(response.Data.RelativePath) 
  41.     //    }, 
  42.     //    deleteData: { id: function () { return "asdfasdf" } } 
  43.     //}); 
  44.    
  45.     $(".upload").upload({ 
  46.         uploadData: { id: "12233" }, 
  47.         successFn: "success",           //可以是字符串 
  48.         deleteData: { id: function () { return "asdfasdf" } } 
  49.     }); 
  50. }); 
  51.  
  52. //上传成功后执行该函数 
  53. function success(response, statusText, xhr, $this) { 
  54.     //比如插入编辑器 
  55.     alert(response.Data.RelativePath + $this.attr("value")) 
  56. } 
  57. */  
  58.   
  59. (function ($) {  
  60.     $.extend($.fn, {  
  61.         upload: function (settings) {  
  62.   
  63.             var options = $.extend({  
  64.                 fileType: "gif|jpg|jpeg|png|bmp",                       //允许的文件格式  
  65.                 uploadUrl: "/ajax/handler.ashx?action=uploadfile",      //上传URL地址  
  66.                 deleteUrl: "/ajax/handler.ashx?action=deletefile",      //删除URL地址  
  67.                  "",                                              //图片显示的宽度  
  68.                 height: 100,                                            //图片显示的高度  
  69.                 imgSelector: ".imgdiv",                                  //图片选择器  
  70.                 uploadData: {},                                         //上传时需要附加的参数  
  71.                 deleteData: {},                                         //删除时需要附加的参数  
  72.                 deleteFn: function ($parent, showMessage) {             //删除图片的方法(默认方法使用POST提交)  
  73.                     methods.deleteImage($parent, showMessage);  
  74.                 },  
  75.                 beforeSubmitFn: "beforeUpload",                         //上传前执行的方法 原型 beforeSubmit(arr, $form, options);  
  76.                 successFn: "uploadSuccess",                             //上传成功后执行的方法 uploadSuccess(response, statusText, xhr, $this)  
  77.                 errorFn: "uploadError"                                  //上传失败后执行的方法  
  78.             }, settings);  
  79.   
  80.             //上传准备函数  
  81.             var methods = {  
  82.                 //验证文件格式  
  83.                 checkFile: function (filename) {  
  84.                     var pos = filename.lastIndexOf(".");  
  85.                     var str = filename.substring(pos, filename.length);  
  86.                     var str1 = str.toLowerCase();  
  87.                     if (typeof options.fileType !== 'string') { options.fileType = "gif|jpg|jpeg|png|bmp"; }  
  88.                     var re = new RegExp(".(" + options.fileType + ")$");  
  89.                     return re.test(str1);  
  90.                 },  
  91.                 //创建表单  
  92.                 createForm: function () {  
  93.                     var $form = document.createElement("form");  
  94.                     $form.action = options.uploadUrl;  
  95.                     $form.method = "post";  
  96.                     $form.enctype = "multipart/form-data";  
  97.                     $form.style.display = "none";  
  98.                     //将表单加当document上，  
  99.                     document.body.appendChild($form);  //创建表单后一定要加上这句否则得到的form不能上传。document后要加上body,否则火狐下不行。  
  100.                     return $($form);  
  101.                 },  
  102.                 //创建图片  
  103.                 createImage: function () {  
  104.                     //不能用 new Image() 来创建图片，否则ie下不能改变img 的宽高  
  105.                     var img = $(document.createElement("img"));  
  106.                     img.attr({ "title": "双击图片可删除图片！" });  
  107.                     if (options.width !== "") {  
  108.                         img.attr({ "width": options.width });  
  109.                     }  
  110.                     if (options.height !== "") {  
  111.                         img.attr({ "height": options.height });  
  112.                     }  
  113.                     return img;  
  114.                 },  
  115.                 showImage: function (filePath, $parent) {  
  116.                     var $img = methods.createImage();  
  117.                     $parent.find(options.imgSelector).find("img").remove();  
  118.                     //要先append再给img赋值，否则在ie下不能缩小宽度。  
  119.                     $img.appendTo($parent.find(options.imgSelector));  
  120.                     $img.attr("src", filePath);  
  121.                     this.bindDelete($parent);  
  122.                 },  
  123.                 bindDelete: function ($parent) {  
  124.                     $parent.find(options.imgSelector).find("img").bind("dblclick", function () {  
  125.                         options.deleteFn($parent, true);  
  126.                     });  
  127.                 },  
  128.                 deleteImage: function ($parent, showMessage) {  
  129.                     var $fileInput = $parent.find("input:hidden");  
  130.                     if ($fileInput.val() !== "") {  
  131.   
  132.                         var data = $.extend(options.deleteData, { filePath: $fileInput.val(), t: Math.random() });  
  133.   
  134.                         $.post(options.deleteUrl, data, function (response) {  
  135.   
  136.                             if (showMessage) { alert(response.MessageContent) }  
  137.   
  138.                             if (response.MessageType == 1) {  
  139.                                 $fileInput.val("");  
  140.                                 $parent.find(options.imgSelector).find("img").remove();  
  141.                             }  
  142.                         }, "JSON");  
  143.                     }  
  144.                 },  
  145.                 onload: function ($parent) {  
  146.                     var hiddenInput = $parent.find("input:hidden");  
  147.                     if (typeof hiddenInput !== "undefined" && hiddenInput.val() !== "") {  
  148.                         var img = methods.createImage();  
  149.                         if ($parent.find(options.imgSelector).find("img").length > 0) { $parent.find(options.imgSelector).find("img").remove(); }  
  150.                         //要先append再给img赋值，否则在ie下不能缩小宽度。   
  151.                         img.appendTo($parent.find(options.imgSelector));  
  152.                         img.attr("src", hiddenInput.val());  
  153.                         methods.bindDelete($parent);  
  154.                     }  
  155.                 }  
  156.             };  
  157.             //上传主函数  
  158.             this.each(function () {  
  159.                 var $this = $(this);  
  160.                 methods.onload($this.parent());  
  161.                 $this.bind("click", function () {  
  162.                     var $fileInput = $(this).parent().find("input:file");  
  163.                     var fileBox = $fileInput.parent();  
  164.   
  165.                     if ($fileInput.val() === "") {  
  166.                         alert("请选择要上传的图片！");  
  167.                         return false;  
  168.                     }  
  169.                     //验证图片  
  170.                     if (!methods.checkFile($fileInput.val())) {  
  171.                         alert("文件格式不正确，只能上传格式为：" + options.fileType + "的文件。");  
  172.                         return false;  
  173.                     }  
  174.                     //若隐藏域中有图片，先删除图片  
  175.                     if ($fileInput.val() !== "") {  
  176.                         options.deleteFn($this.parent(), false);  
  177.                         //methods.deleteImage($this.parent(), false);  
  178.                     }  
  179.   
  180.                     //创建表单  
  181.                     var $form = methods.createForm();  
  182.   
  183.                     //把上传控件附加到表单  
  184.                     $fileInput.appendTo($form);  
  185.                     fileBox.html("<img src="/admin/styles/images/loading.gif" />   正在上传...  ");  
  186.                     $this.attr("disabled", true);  
  187.   
  188.                     //构建ajaxSubmit参数  
  189.                     var data = {};  
  190.                     data.data = options.uploadData;  
  191.                     data.type = "POST";  
  192.                     data.dataType = "JSON";  
  193.                     //上传前  
  194.                     data.beforeSubmit = function (arr, $form, options) {  
  195.   
  196.                         var beforeSubmitFn;  
  197.                         try { beforeSubmitFn = eval(options.beforeSubmitFn) } catch (err) { };  
  198.                         if (beforeSubmitFn) {  
  199.                             var $result = beforeSubmitFn(arr, $form, options);  
  200.                             if (typeof ($result) == "boolean")  
  201.                                 return $result;  
  202.                         }  
  203.                     };  
  204.                     //上传失败  
  205.                     data.error = function (response, statusText, xhr, $form) {  
  206.                         var errorFn;  
  207.                         try { errorFn = eval(options.errorFn) } catch (err) { };  
  208.                         if (errorFn) {  
  209.                             errorFn(response.responseText, statusText, xhr, $this);  
  210.                         }  
  211.                     };  
  212.                     //上传成功  
  213.                     data.success = function (response, statusText, xhr, $form) {  
  214.                         //response = eval("(" + response + ")");  
  215.                         if (response.MessageType == 1) {  
  216.                             methods.showImage(response.Data.RelativePath, $this.parent());  
  217.                             $this.parent().find("input:hidden").val(response.Data.RelativePath);  
  218.   
  219.                             var successFn;  
  220.                             try { successFn = eval(options.successFn) } catch (err) { };  
  221.                             if (successFn) {  
  222.                                 $.ajaxSetup({ cache: false });//这个不能少，否则ie下会提示下载  
  223.                                 successFn(response, statusText, xhr, $this);  
  224.                             }  
  225.   
  226.   
  227.                         } else {  
  228.                             alert(response.MessageContent);  
  229.                         }  
  230.                         $this.attr("disabled", false);  
  231.                         fileBox.html("<input type="file" name="file" />");  
  232.                         $form.remove();  
  233.                     };  
  234.   
  235.                     try {  
  236.                         //开始ajax提交表单  
  237.                         $form.ajaxSubmit(data);  
  238.                     } catch (e) {  
  239.                         alert(e.message);  
  240.                     }  
  241.                 });  
  242.             });  
  243.         }  
  244.     });  
  245. })(jQuery)  

html代码：

[html] 
 

  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <script src="Scripts/jquery/jquery-1.8.3.js"></script>  
  7. <script src="Scripts/jquery/ajaxForm/jquery.form.js"></script>  
  8. <script src="Scripts/jquery/jquery.upload.js"></script>  
  9. <title></title>  
  10. </head>  
  11. <body>  
  12. <form id="form1" runat="server">  
  13. <div style=" 100%; float: left;">  
  14.     <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" />  
  15.     <div class="imgdiv"></div>  
  16.     <span class="img_span">  
  17.         <input type="file" name="file" />  
  18.     </span>  
  19.        
  20.     <input type="button" value="上传" class="upload" />  
  21. </div>  
  22. <div style=" 100%; float: left;">  
  23.     <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" />  
  24.     <div class="imgdiv"></div>  
  25.     <span class="img_span">  
  26.         <input type="file" name="file" />  
  27.     </span>  
  28.        
  29.     <input type="button" value="上传" class="upload" />  
  30. </div>  
  31. </form>  
  32. <script type="text/javascript">  
  33.     $(document).ready(function () {  
  34.         //$(".upload").upload({  
  35.         //    uploadData: { id: "12233" },  
  36.         //    successFn: function (response, statusText, xhr, $this) {  
  37.         //        alert(response.Data.RelativePath)  
  38.         //    },  
  39.         //    deleteData: { id: function () { return "asdfasdf" } }  
  40.         //});  
  41.         $(".upload").upload({  
  42.             uploadData: { id: "12233" },  
  43.             successFn: "success",  
  44.             deleteData: { id: function () { return "asdfasdf" } }  
  45.         });  
  46.     });  
  47.   
  48.     //上传成功后执行该函数  
  49.     function success(response, statusText, xhr, $this) {  
  50.         //比如插入编辑器  
  51.         alert(response.Data.RelativePath + $this.attr("value"))  
  52.     }  
  53. </script>  
  54. </body>  
  55. </html>  


服务器端使用一般处理程序：

[csharp] 
 

  1. public void ProcessRequest(HttpContext context)  
  2. {  
  3.     context.Response.ContentType = "application/json";  
  4.     var action = context.Request.QueryString.Get<string>("action").ToLower();  
  5.     var response = new JsonResult(StatusMessageType.Error, "没有权限或无效请求。").ToJson();  
  6.     switch (action)  
  7.     {  
  8.   
  9.         case "uploadfile":  
  10.             if (context.Request.Files.Count > 0)  
  11.                 response = UploadFile(context.Request);  
  12.             break;  
  13.         case "deletefile":  
  14.             response = DeleteFile(context.Request.Form);  
  15.             break;  
  16.         default:  
  17.             break;  
  18.     }  
  19.     context.Response.Write(response);  
  20. }  
  21. /// <summary>  
  22. ///   
  23. /// </summary>  
  24. /// <param name="file"></param>  
  25. /// <returns></returns>  
  26. private string UploadFile(HttpRequest request)  
  27. {  
  28.     if (request.Files.Count == 0)  
  29.         return new JsonResult(StatusMessageType.Error, "没有可处理的数据。").ToJson();  
  30.     var id = request.Form.Get<string>("id", "");  
  31.   
  32.     var file = request.Files[0];  
  33.     if (file == null || file.ContentLength <= 0 || string.IsNullOrEmpty(file.FileName))  
  34.         return new JsonResult(StatusMessageType.Error, "没有可处理的数据。").ToJson();  
  35.   
  36.     //IStoreFile storeFile = null;  
  37.   
  38.     string[] datePaths = new string[] { "~/uploads/" };  
  39.     datePaths = datePaths.Union(DateTime.Now.ToString("yyyy-MM-dd").Split('-')).ToArray();  
  40.     var relativePath = storeProvider.JoinDirectory(datePaths);  
  41.   
  42.     var dirPath = HttpContext.Current.Server.MapPath(relativePath);  
  43.   
  44.     if (!System.IO.Directory.Exists(dirPath))  
  45.         System.IO.Directory.CreateDirectory(dirPath);  
  46.   
  47.     var fileName = GenerateFileName(Path.GetExtension(file.FileName));  
  48.   
  49.     var filePath = Path.Combine(dirPath, fileName);  
  50.     file.SaveAs(filePath);  
  51.     return new JsonResult(StatusMessageType.Success, "上传成功。", new  
  52.     {  
  53.         RelativePath = WebUtility.ResolveUrl(Path.Combine(relativePath, fileName)),  
  54.         Size = file.ContentLength,  
  55.         Id = id,  
  56.     }).ToJson();  
  57. }  
  58.   
  59. public string DeleteFile(NameValueCollection form)  
  60. {  
  61.     var filePath = form.Get<string>("filePath", "").Trim();  
  62.     if (string.IsNullOrEmpty(filePath))  
  63.         return new JsonResult(StatusMessageType.Error, "无效提交。").ToJson();  
  64.   
  65.     try  
  66.     {  
  67.         if (System.IO.File.Exists(HttpContext.Current.Server.MapPath(filePath)))  
  68.         {  
  69.             System.IO.File.Delete(HttpContext.Current.Server.MapPath(filePath));  
  70.             return new JsonResult(StatusMessageType.Success, "文件删除成功。").ToJson();  
  71.         }  
  72.         else  
  73.         {  
  74.             return new JsonResult(StatusMessageType.Success, "找不到该文件。").ToJson();  
  75.         }  
  76.     }  
  77.     catch (Exception)  
  78.     {  
  79.         return new JsonResult(StatusMessageType.Hint, "发生错误。").ToJson();  
  80.     }  
  81. }  
  82.   
  83. /// <summary>  
  84. /// 生成随机文件名  
  85. /// </summary>  
  86. /// <returns></returns>  
  87. private string GenerateFileName(string extension)  
  88. {  
  89.     return DateTime.Now.Ticks.ToString() + extension;  
  90. }  

程序使用的是framework4.0，所以使用了一些扩展方法。
JsonTesult类代码：

[csharp] 
 

  1. [Serializable]  
  2. public class JsonResult  
  3. {  
  4.     private StatusMessageType _messageType;  
  5.     private string _messageContent;  
  6.   
  7.   
  8.     /// <summary>  
  9.     ///   
  10.     /// </summary>  
  11.     /// <param name="messageType"></param>  
  12.     /// <param name="messageContent"></param>  
  13.     /// <param name="data"></param>  
  14.     public JsonResult(StatusMessageType messageType, string messageContent, object data = null)  
  15.     {  
  16.         _messageType = messageType;  
  17.         _messageContent = messageContent;  
  18.         Data = data;  
  19.     }  
  20.   
  21.     public StatusMessageType MessageType  
  22.     {  
  23.         get { return _messageType; }  
  24.         set { _messageType = value; }  
  25.     }  
  26.   
  27.     public string MessageContent  
  28.     {  
  29.         get { return _messageContent; }  
  30.         set { _messageContent = value; }  
  31.     }  
  32.   
  33.     public object Data { get; set; }  
  34.   
  35.     public string ToJson()  
  36.     {  
  37.         JavaScriptSerializer serializer = new JavaScriptSerializer();  
  38.         var json = serializer.Serialize(this);  
  39.   
  40.         //string p = @"\/Date(d+)\/";  
  41.         //MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString);  
  42.         //Regex reg = new Regex(p);  
  43.         //json = reg.Replace(json, matchEvaluator);  
  44.         return json;  
  45.     }  
  46.   
  47.     private static string ConvertJsonDateToDateString(Match m)  
  48.     {  
  49.         string result = string.Empty;  
  50.         DateTime dt = new DateTime(1970, 1, 1);  
  51.         dt = dt.AddMilliseconds(long.Parse(m.Groups[1].Value));  
  52.         dt = dt.ToLocalTime();  
  53.         result = dt.ToString("d");  
  54.         return result;  
  55.     }  
  56. }  

StatusMessageType枚举类：

[csharp] 
 

    1. /// <summary>  
    2. /// 提示消息类别  
    3. /// </summary>  
    4. public enum StatusMessageType  
    5. {  
    6.     /// <summary>  
    7.     /// 权限不足  
    8.     /// </summary>  
    9.     NoAccess = -2,  
    10.     /// <summary>  
    11.     /// 错误  
    12.     /// </summary>  
    13.     Error = -1,  
    14.     /// <summary>  
    15.     /// 成功  
    16.     /// </summary>  
    17.     Success = 1,  
    18.   
    19.     /// <summary>  
    20.     /// 提示信息  
    21.     /// </summary>  
    22.     Hint = 0  
    23. }  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mingweiyard/p/6426475.html