zoukankan      html  css  js  c++  java
  • 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. (function ($) {  
    59.     $.extend($.fn, {  
    60.         upload: function (settings) {  
    61.   
    62.             var options = $.extend({  
    63.                 fileType: "gif|jpg|jpeg|png|bmp",                       //允许的文件格式  
    64.                 uploadUrl: "/ajax/handler.ashx?action=uploadfile",      //上传URL地址  
    65.                 deleteUrl: "/ajax/handler.ashx?action=deletefile",      //删除URL地址  
    66.                  "",                                              //图片显示的宽度  
    67.                 height: 100,                                            //图片显示的高度  
    68.                 imgSelector: ".imgdiv",                                  //图片选择器  
    69.                 uploadData: {},                                         //上传时需要附加的参数  
    70.                 deleteData: {},                                         //删除时需要附加的参数  
    71.                 deleteFn: function ($parent, showMessage) {             //删除图片的方法(默认方法使用POST提交)  
    72.                     methods.deleteImage($parent, showMessage);  
    73.                 },  
    74.                 beforeSubmitFn: "beforeUpload",                         //上传前执行的方法 原型 beforeSubmit(arr, $form, options);  
    75.                 successFn: "uploadSuccess",                             //上传成功后执行的方法 uploadSuccess(response, statusText, xhr, $this)  
    76.                 errorFn: "uploadError"                                  //上传失败后执行的方法  
    77.             }, settings);  
    78.   
    79.             //上传准备函数  
    80.             var methods = {  
    81.                 //验证文件格式  
    82.                 checkFile: function (filename) {  
    83.                     var pos = filename.lastIndexOf(".");  
    84.                     var str = filename.substring(pos, filename.length);  
    85.                     var str1 = str.toLowerCase();  
    86.                     if (typeof options.fileType !== 'string') { options.fileType = "gif|jpg|jpeg|png|bmp"; }  
    87.                     var re = new RegExp(".(" + options.fileType + ")$");  
    88.                     return re.test(str1);  
    89.                 },  
    90.                 //创建表单  
    91.                 createForm: function () {  
    92.                     var $form = document.createElement("form");  
    93.                     $form.action = options.uploadUrl;  
    94.                     $form.method = "post";  
    95.                     $form.enctype = "multipart/form-data";  
    96.                     $form.style.display = "none";  
    97.                     //将表单加当document上,  
    98.                     document.body.appendChild($form);  //创建表单后一定要加上这句否则得到的form不能上传。document后要加上body,否则火狐下不行。  
    99.                     return $($form);  
    100.                 },  
    101.                 //创建图片  
    102.                 createImage: function () {  
    103.                     //不能用 new Image() 来创建图片,否则ie下不能改变img 的宽高  
    104.                     var img = $(document.createElement("img"));  
    105.                     img.attr({ "title": "双击图片可删除图片!" });  
    106.                     if (options.width !== "") {  
    107.                         img.attr({ "width": options.width });  
    108.                     }  
    109.                     if (options.height !== "") {  
    110.                         img.attr({ "height": options.height });  
    111.                     }  
    112.                     return img;  
    113.                 },  
    114.                 showImage: function (filePath, $parent) {  
    115.                     var $img = methods.createImage();  
    116.                     $parent.find(options.imgSelector).find("img").remove();  
    117.                     //要先append再给img赋值,否则在ie下不能缩小宽度。  
    118.                     $img.appendTo($parent.find(options.imgSelector));  
    119.                     $img.attr("src", filePath);  
    120.                     this.bindDelete($parent);  
    121.                 },  
    122.                 bindDelete: function ($parent) {  
    123.                     $parent.find(options.imgSelector).find("img").bind("dblclick", function () {  
    124.                         options.deleteFn($parent, true);  
    125.                     });  
    126.                 },  
    127.                 deleteImage: function ($parent, showMessage) {  
    128.                     var $fileInput = $parent.find("input:hidden");  
    129.                     if ($fileInput.val() !== "") {  
    130.   
    131.                         var data = $.extend(options.deleteData, { filePath: $fileInput.val(), t: Math.random() });  
    132.   
    133.                         $.post(options.deleteUrl, data, function (response) {  
    134.   
    135.                             if (showMessage) { alert(response.MessageContent) }  
    136.   
    137.                             if (response.MessageType == 1) {  
    138.                                 $fileInput.val("");  
    139.                                 $parent.find(options.imgSelector).find("img").remove();  
    140.                             }  
    141.                         }, "JSON");  
    142.                     }  
    143.                 },  
    144.                 onload: function ($parent) {  
    145.                     var hiddenInput = $parent.find("input:hidden");  
    146.                     if (typeof hiddenInput !== "undefined" && hiddenInput.val() !== "") {  
    147.                         var img = methods.createImage();  
    148.                         if ($parent.find(options.imgSelector).find("img").length > 0) { $parent.find(options.imgSelector).find("img").remove(); }  
    149.                         //要先append再给img赋值,否则在ie下不能缩小宽度。   
    150.                         img.appendTo($parent.find(options.imgSelector));  
    151.                         img.attr("src", hiddenInput.val());  
    152.                         methods.bindDelete($parent);  
    153.                     }  
    154.                 }  
    155.             };  
    156.             //上传主函数  
    157.             this.each(function () {  
    158.                 var $this = $(this);  
    159.                 methods.onload($this.parent());  
    160.                 $this.bind("click", function () {  
    161.                     var $fileInput = $(this).parent().find("input:file");  
    162.                     var fileBox = $fileInput.parent();  
    163.   
    164.                     if ($fileInput.val() === "") {  
    165.                         alert("请选择要上传的图片!");  
    166.                         return false;  
    167.                     }  
    168.                     //验证图片  
    169.                     if (!methods.checkFile($fileInput.val())) {  
    170.                         alert("文件格式不正确,只能上传格式为:" + options.fileType + "的文件。");  
    171.                         return false;  
    172.                     }  
    173.                     //若隐藏域中有图片,先删除图片  
    174.                     if ($fileInput.val() !== "") {  
    175.                         options.deleteFn($this.parent(), false);  
    176.                         //methods.deleteImage($this.parent(), false);  
    177.                     }  
    178.   
    179.                     //创建表单  
    180.                     var $form = methods.createForm();  
    181.   
    182.                     //把上传控件附加到表单  
    183.                     $fileInput.appendTo($form);  
    184.                     fileBox.html("<img src="/admin/styles/images/loading.gif" />   正在上传...  ");  
    185.                     $this.attr("disabled", true);  
    186.   
    187.                     //构建ajaxSubmit参数  
    188.                     var data = {};  
    189.                     data.data = options.uploadData;  
    190.                     data.type = "POST";  
    191.                     data.dataType = "JSON";  
    192.                     //上传前  
    193.                     data.beforeSubmit = function (arr, $form, options) {  
    194.   
    195.                         var beforeSubmitFn;  
    196.                         try { beforeSubmitFn = eval(options.beforeSubmitFn) } catch (err) { };  
    197.                         if (beforeSubmitFn) {  
    198.                             var $result = beforeSubmitFn(arr, $form, options);  
    199.                             if (typeof ($result) == "boolean")  
    200.                                 return $result;  
    201.                         }  
    202.                     };  
    203.                     //上传失败  
    204.                     data.error = function (response, statusText, xhr, $form) {  
    205.                         var errorFn;  
    206.                         try { errorFn = eval(options.errorFn) } catch (err) { };  
    207.                         if (errorFn) {  
    208.                             errorFn(response.responseText, statusText, xhr, $this);  
    209.                         }  
    210.                     };  
    211.                     //上传成功  
    212.                     data.success = function (response, statusText, xhr, $form) {  
    213.                         //response = eval("(" + response + ")");  
    214.                         if (response.MessageType == 1) {  
    215.                             methods.showImage(response.Data.RelativePath, $this.parent());  
    216.                             $this.parent().find("input:hidden").val(response.Data.RelativePath);  
    217.   
    218.                             var successFn;  
    219.                             try { successFn = eval(options.successFn) } catch (err) { };  
    220.                             if (successFn) {  
    221.                                 $.ajaxSetup({ cache: false });//这个不能少,否则ie下会提示下载  
    222.                                 successFn(response, statusText, xhr, $this);  
    223.                             }  
    224.   
    225.   
    226.                         } else {  
    227.                             alert(response.MessageContent);  
    228.                         }  
    229.                         $this.attr("disabled", false);  
    230.                         fileBox.html("<input type="file" name="file" />");  
    231.                         $form.remove();  
    232.                     };  
    233.   
    234.                     try {  
    235.                         //开始ajax提交表单  
    236.                         $form.ajaxSubmit(data);  
    237.                     } catch (e) {  
    238.                         alert(e.message);  
    239.                     }  
    240.                 });  
    241.             });  
    242.         }  
    243.     });  
    244. })(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. }  
  • 相关阅读:
    table表头固定
    【ztree系列——图标的修改】Bootstrap风格的ztree
    JS使用cookie实现DIV提示框只显示一次的方法
    js正则验证手机号码有效性
    Highcharts、AJAX、JSON、JQuery实现动态数据交互显示图表柱形图
    display:table合并表格
    jsp标签、 项目全路径引用${ctx}
    apache poi合并单元格设置边框
    Kettle 中转换(transformation)的执行过程
    数据结构--堆的实现(上)
  • 原文地址:https://www.cnblogs.com/mingweiyard/p/6426475.html
Copyright © 2011-2022 走看看