«

ajax图片上传，图片异步上传，更新实例

时间：2024-3-2 07:48     作者：韩俊     分类： Html+Css

最近在研究ajax图片上传，图片异步上传，更新，留作参考。

直接上源码吧：

js源码：

/// <reference path="jquery-1.8.3.js" /> 
/// <reference path="ajaxForm/jquery.form.js" /> 

/*! 
 * jQuery upload 
 * 用于上传单个文件，上传成功后,返回文件路径。 
 * 本插件依赖jQuery，jquery.form 请在使用时引入依赖的文件 
 * 
 * Date: 2014/4/23 
 */ 
/* 
<div style="width: 100%; float: left;"> 
 <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" /> 
 <div class="imgdiv"></div> 
 <span class="img_span"> 
 <input type="file" name="file" /> 
 </span> 

 <input type="button" value="上传" class="upload" /> 
</div> 
<div style="width: 100%; float: left;"> 
 <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" /> 
 <div class="imgdiv"></div> 
 <span class="img_span"> 
 <input type="file" name="file" /> 
 </span> 
 <input type="button" value="上传" class="upload" /> 
</div>

js: 

$(document).ready(function () { 

 //$(".upload").upload({ 
 // uploadData: { id: "12233" }, 
 // successFn: function (response, statusText, xhr, $this) { 
 // alert(response.Data.RelativePath) 
 // }, 
 // deleteData: { id: function () { return "asdfasdf" } } 
 //}); 

 $(".upload").upload({ 
 uploadData: { id: "12233" }, 
 successFn: "success", //可以是字符串 
 deleteData: { id: function () { return "asdfasdf" } } 
 }); 
}); 

//上传成功后执行该函数 
function success(response, statusText, xhr, $this) { 
 //比如插入编辑器 
 alert(response.Data.RelativePath + $this.attr("value")) 
} 
*/ 

(function ($) { 
 $.extend($.fn, { 
 upload: function (settings) { 

 var options = $.extend({ 
 fileType: "gif|jpg|jpeg|png|bmp",  //允许的文件格式 
 uploadUrl: "/ajax/handler.ashx?action=uploadfile", //上传URL地址 
 deleteUrl: "/ajax/handler.ashx?action=deletefile", //删除URL地址 
 width: "",   //图片显示的宽度 
 height: 100,   //图片显示的高度 
 imgSelector: ".imgdiv",   //图片选择器 
 uploadData: {},   //上传时需要附加的参数 
 deleteData: {},   //删除时需要附加的参数 
 deleteFn: function ($parent, showMessage) { //删除图片的方法(默认方法使用POST提交) 
  methods.deleteImage($parent, showMessage); 
 }, 
 beforeSubmitFn: "beforeUpload",  //上传前执行的方法 原型 beforeSubmit(arr, $form, options); 
 successFn: "uploadSuccess",  //上传成功后执行的方法 uploadSuccess(response, statusText, xhr, $this) 
 errorFn: "uploadError"   //上传失败后执行的方法 
 }, settings); 

 //上传准备函数 
 var methods = { 
 //验证文件格式 
 checkFile: function (filename) { 
  var pos = filename.lastIndexOf("."); 
  var str = filename.substring(pos, filename.length); 
  var str1 = str.toLowerCase(); 
  if (typeof options.fileType !== 'string') { options.fileType = "gif|jpg|jpeg|png|bmp"; } 
  var re = new RegExp(".(" + options.fileType + ")$"); 
  return re.test(str1); 
 }, 
 //创建表单 
 createForm: function () { 
  var $form = document.createElement("form"); 
  $form.action = options.uploadUrl; 
  $form.method = "post"; 
  $form.enctype = "multipart/form-data"; 
  $form.style.display = "none"; 
  //将表单加当document上， 
  document.body.appendChild($form); //创建表单后一定要加上这句否则得到的form不能上传。document后要加上body,否则火狐下不行。 
  return $($form); 
 }, 
 //创建图片 
 createImage: function () { 
  //不能用 new Image() 来创建图片，否则ie下不能改变img 的宽高 
  var img = $(document.createElement("img")); 
  img.attr({ "title": "双击图片可删除图片！" }); 
  if (options.width !== "") { 
  img.attr({ "width": options.width }); 
  } 
  if (options.height !== "") { 
  img.attr({ "height": options.height }); 
  } 
  return img; 
 }, 
 showImage: function (filePath, $parent) { 
  var $img = methods.createImage(); 
  $parent.find(options.imgSelector).find("img").remove(); 
  //要先append再给img赋值，否则在ie下不能缩小宽度。 
  $img.appendTo($parent.find(options.imgSelector)); 
  $img.attr("src", filePath); 
  this.bindDelete($parent); 
 }, 
 bindDelete: function ($parent) { 
  $parent.find(options.imgSelector).find("img").bind("dblclick", function () { 
  options.deleteFn($parent, true); 
  }); 
 }, 
 deleteImage: function ($parent, showMessage) { 
  var $fileInput = $parent.find("input:hidden"); 
  if ($fileInput.val() !== "") { 

  var data = $.extend(options.deleteData, { filePath: $fileInput.val(), t: Math.random() }); 

  $.post(options.deleteUrl, data, function (response) { 

  if (showMessage) { alert(response.MessageContent) } 

  if (response.MessageType == 1) { 
  $fileInput.val(""); 
  $parent.find(options.imgSelector).find("img").remove(); 
  } 
  }, "JSON"); 
  } 
 }, 
 onload: function ($parent) { 
  var hiddenInput = $parent.find("input:hidden"); 
  if (typeof hiddenInput !== "undefined" && hiddenInput.val() !== "") { 
  var img = methods.createImage(); 
  if ($parent.find(options.imgSelector).find("img").length > 0) { $parent.find(options.imgSelector).find("img").remove(); } 
  //要先append再给img赋值，否则在ie下不能缩小宽度。 
  img.appendTo($parent.find(options.imgSelector)); 
  img.attr("src", hiddenInput.val()); 
  methods.bindDelete($parent); 
  } 
 } 
 }; 
 //上传主函数 
 this.each(function () { 
 var $this = $(this); 
 methods.onload($this.parent()); 
 $this.bind("click", function () { 
  var $fileInput = $(this).parent().find("input:file"); 
  var fileBox = $fileInput.parent(); 

  if ($fileInput.val() === "") { 
  alert("请选择要上传的图片！"); 
  return false; 
  } 
  //验证图片 
  if (!methods.checkFile($fileInput.val())) { 
  alert("文件格式不正确，只能上传格式为：" + options.fileType + "的文件。"); 
  return false; 
  } 
  //若隐藏域中有图片，先删除图片 
  if ($fileInput.val() !== "") { 
  options.deleteFn($this.parent(), false); 
  //methods.deleteImage($this.parent(), false); 
  } 

  //创建表单 
  var $form = methods.createForm(); 

  //把上传控件附加到表单 
  $fileInput.appendTo($form); 
  fileBox.html("<img src="/admin/styles/images/loading.gif" /> 正在上传... "); 
  $this.attr("disabled", true); 

  //构建ajaxSubmit参数 
  var data = {}; 
  data.data = options.uploadData; 
  data.type = "POST"; 
  data.dataType = "JSON"; 
  //上传前 
  data.beforeSubmit = function (arr, $form, options) { 

  var beforeSubmitFn; 
  try { beforeSubmitFn = eval(options.beforeSubmitFn) } catch (err) { }; 
  if (beforeSubmitFn) { 
  var $result = beforeSubmitFn(arr, $form, options); 
  if (typeof ($result) == "boolean") 
  return $result; 
  } 
  }; 
  //上传失败 
  data.error = function (response, statusText, xhr, $form) { 
  var errorFn; 
  try { errorFn = eval(options.errorFn) } catch (err) { }; 
  if (errorFn) { 
  errorFn(response.responseText, statusText, xhr, $this); 
  } 
  }; 
  //上传成功 
  data.success = function (response, statusText, xhr, $form) { 
  //response = eval("(" + response + ")"); 
  if (response.MessageType == 1) { 
  methods.showImage(response.Data.RelativePath, $this.parent()); 
  $this.parent().find("input:hidden").val(response.Data.RelativePath); 

  var successFn; 
  try { successFn = eval(options.successFn) } catch (err) { }; 
  if (successFn) { 
  $.ajaxSetup({ cache: false });//这个不能少，否则ie下会提示下载 
  successFn(response, statusText, xhr, $this); 
  } 

  } else { 
  alert(response.MessageContent); 
  } 
  $this.attr("disabled", false); 
  fileBox.html("<input type="file" name="file" />"); 
  $form.remove(); 
  }; 

  try { 
  //开始ajax提交表单 
  $form.ajaxSubmit(data); 
  } catch (e) { 
  alert(e.message); 
  } 
 }); 
 }); 
 } 
 }); 
})(jQuery)

html代码：

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="Scripts/jquery/jquery-1.8.3.js"></script> 
<script src="Scripts/jquery/ajaxForm/jquery.form.js"></script> 
<script src="Scripts/jquery/jquery.upload.js"></script> 
<title></title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="width: 100%; float: left;"> 
 <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" /> 
 <div class="imgdiv"></div> 
 <span class="img_span"> 
 <input type="file" name="file" /> 
 </span> 

 <input type="button" value="上传" class="upload" /> 
</div> 
<div style="width: 100%; float: left;"> 
 <input type="hidden" id="hfThumbnail" value="/uploads/2014/04/23/635338686611432716.jpg" /> 
 <div class="imgdiv"></div> 
 <span class="img_span"> 
 <input type="file" name="file" /> 
 </span> 

 <input type="button" value="上传" class="upload" /> 
</div> 
</form> 
<script type="text/javascript"> 
 $(document).ready(function () { 
 //$(".upload").upload({ 
 // uploadData: { id: "12233" }, 
 // successFn: function (response, statusText, xhr, $this) { 
 // alert(response.Data.RelativePath) 
 // }, 
 // deleteData: { id: function () { return "asdfasdf" } } 
 //}); 
 $(".upload").upload({ 
 uploadData: { id: "12233" }, 
 successFn: "success", 
 deleteData: { id: function () { return "asdfasdf" } } 
 }); 
 }); 

 //上传成功后执行该函数 
 function success(response, statusText, xhr, $this) { 
 //比如插入编辑器 
 alert(response.Data.RelativePath + $this.attr("value")) 
 } 
</script> 
</body> 
</html>

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

public void ProcessRequest(HttpContext context) 
{ 
 context.Response.ContentType = "application/json"; 
 var action = context.Request.QueryString.Get<string>("action").ToLower(); 
 var response = new JsonResult(StatusMessageType.Error, "没有权限或无效请求。").ToJson(); 
 switch (action) 
 { 

 case "uploadfile": 
 if (context.Request.Files.Count > 0) 
 response = UploadFile(context.Request); 
 break; 
 case "deletefile": 
 response = DeleteFile(context.Request.Form); 
 break; 
 default: 
 break; 
 } 
 context.Response.Write(response); 
} 
/// <summary> 
/// 
/// </summary> 
/// <param name="file"></param> 
/// <returns></returns> 
private string UploadFile(HttpRequest request) 
{ 
 if (request.Files.Count == 0) 
 return new JsonResult(StatusMessageType.Error, "没有可处理的数据。").ToJson(); 
 var id = request.Form.Get<string>("id", ""); 

 var file = request.Files[0]; 
 if (file == null || file.ContentLength <= 0 || string.IsNullOrEmpty(file.FileName)) 
 return new JsonResult(StatusMessageType.Error, "没有可处理的数据。").ToJson(); 

 //IStoreFile storeFile = null; 

 string[] datePaths = new string[] { "~/uploads/" }; 
 datePaths = datePaths.Union(DateTime.Now.ToString("yyyy-MM-dd").Split('-')).ToArray(); 
 var relativePath = storeProvider.JoinDirectory(datePaths); 

 var dirPath = HttpContext.Current.Server.MapPath(relativePath); 

 if (!System.IO.Directory.Exists(dirPath)) 
 System.IO.Directory.CreateDirectory(dirPath); 

 var fileName = GenerateFileName(Path.GetExtension(file.FileName)); 

 var filePath = Path.Combine(dirPath, fileName); 
 file.SaveAs(filePath); 
 return new JsonResult(StatusMessageType.Success, "上传成功。", new 
 { 
 RelativePath = WebUtility.ResolveUrl(Path.Combine(relativePath, fileName)), 
 Size = file.ContentLength, 
 Id = id, 
 }).ToJson(); 
} 

public string DeleteFile(NameValueCollection form) 
{ 
 var filePath = form.Get<string>("filePath", "").Trim(); 
 if (string.IsNullOrEmpty(filePath)) 
 return new JsonResult(StatusMessageType.Error, "无效提交。").ToJson(); 

 try 
 { 
 if (System.IO.File.Exists(HttpContext.Current.Server.MapPath(filePath))) 
 { 
 System.IO.File.Delete(HttpContext.Current.Server.MapPath(filePath)); 
 return new JsonResult(StatusMessageType.Success, "文件删除成功。").ToJson(); 
 } 
 else 
 { 
 return new JsonResult(StatusMessageType.Success, "找不到该文件。").ToJson(); 
 } 
 } 
 catch (Exception) 
 { 
 return new JsonResult(StatusMessageType.Hint, "发生错误。").ToJson(); 
 } 
} 

/// <summary> 
/// 生成随机文件名 
/// </summary> 
/// <returns></returns> 
private string GenerateFileName(string extension) 
{ 
 return DateTime.Now.Ticks.ToString() + extension; 
}

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

JsonTesult类代码：

[Serializable] 
public class JsonResult 
{ 
 private StatusMessageType _messageType; 
 private string _messageContent; 

 /// <summary> 
 /// 
 /// </summary> 
 /// <param name="messageType"></param> 
 /// <param name="messageContent"></param> 
 /// <param name="data"></param> 
 public JsonResult(StatusMessageType messageType, string messageContent, object data = null) 
 { 
 _messageType = messageType; 
 _messageContent = messageContent; 
 Data = data; 
 } 

 public StatusMessageType MessageType 
 { 
 get { return _messageType; } 
 set { _messageType = value; } 
 } 

 public string MessageContent 
 { 
 get { return _messageContent; } 
 set { _messageContent = value; } 
 } 

 public object Data { get; set; } 

 public string ToJson() 
 { 
 JavaScriptSerializer serializer = new JavaScriptSerializer(); 
 var json = serializer.Serialize(this); 

 //string p = @"\/Date(d+)\/"; 
 //MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString); 
 //Regex reg = new Regex(p); 
 //json = reg.Replace(json, matchEvaluator); 
 return json; 
 } 

 private static string ConvertJsonDateToDateString(Match m) 
 { 
 string result = string.Empty; 
 DateTime dt = new DateTime(1970, 1, 1); 
 dt = dt.AddMilliseconds(long.Parse(m.Groups[1].Value)); 
 dt = dt.ToLocalTime(); 
 result = dt.ToString("d"); 
 return result; 
 } 
}

StatusMessageType枚举类：

/// <summary> 
/// 提示消息类别 
/// </summary> 
public enum StatusMessageType 
{ 
 /// <summary> 
 /// 权限不足 
 /// </summary> 
 NoAccess = -2, 
 /// <summary> 
 /// 错误 
 /// </summary> 
 Error = -1, 
 /// <summary> 
 /// 成功 
 /// </summary> 
 Success = 1, 

 /// <summary> 
 /// 提示信息 
 /// </summary> 
 Hint = 0 
}

其他的扩展方法就不一一给出来了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

标签: javascript html css

热门推荐

1 CSS浮动和清除浮动：掌握浮动和清除浮动的技巧
2 ashx文件获取$.ajax()方法发送的数据
3 浅析offsetLeft,Left,clientLeft之间的区别
4 document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
5 使用getBoundingClientRect方法实现简洁的sticky组件的方法
6 JavaScript+html5 canvas制作的百花齐放效果完整实例
7 Smarty最简单实现列表奇偶变色的方法
8 cache_lite试用
9 网站收录量减少的原因分析总结
10 hovertree插件实现二级树形菜单（简单实用）

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章