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

网络编程 JavaScript javascript类库 jquery 分类:[default] 更新日期: 2017-05-14
本篇文章主要介绍了ajax图片上传,图片异步上传,更新,具有一定的参考价值,有想去的可以了解一下。

最近在研究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"  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"  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  runat="server"> 
<div style="width: 100%; float: left;"> 
 <input type="hidden"  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"  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 
} 

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

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • asp.netcore实现文件上传功能
    asp.netcore实现文件上传功能
    这篇文章主要为大家详细介绍了asp.net core实现文件上传功能,怎么做单文件和多文件上传,感兴趣的小伙伴们可以参考一下本文实例为大家分享了单文件上传.多文件上传的功能,供大家参考,具体内容如下 单文件上传 上传文件在Web应用程序中是一个常见的功能.在asp.net core中上传文件并保存在服务器上,是很容易的.下面就来演示一下怎么样在 ASP.NE ...
  • Jquery和BigFileUpload实现大文件上传及进度条显示
    Jquery和BigFileUpload实现大文件上传及进度条显示
    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面 ...
  • Linux上安装Python的PIL和Pillow库处理图片的实例教程
    这里我们来看一下在Linux上安装Python的PIL和Pillow库处理图片的实例教程,包括一个使用Pillow库实现批量转换图片的例子:安装正常情况,只需 pip install PIL==1.1.7 或者 pip install Pillow==2.9.0 即可.但需留意安装后的输出安装完成后,需留意输出: *** TKINTER support no ...
  • 关于图片存储格式的整理(JPEG格式介绍)
    这篇文章主要介绍了关于图片存储格式的整理JPEG,需要的朋友可以参考下JPG jpg全名是JPEG .JPEG 图片以 24 位颜色存储单个光栅图像.JPEG 是与平台无关的格式,支持最高级别的压缩,不过,这种压缩是有损耗的.渐近式 JPEG 文件支持交错. jpg功能 可以提高或降低 JPEG文件压缩的级别.但是,文件大小是以牺牲图像质量为代价的.压缩比率 ...
  • Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天 ...
  • 探讨Ajax中有关readyState状态值和status状态码)的问题
    这篇文章主要介绍了探讨Ajax中有关readyState状态值和status状态码的问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下先看下面一段代码,然后给大家详细介绍,Ajax中有关readyState(状态值)和status(状态码)的问题,具体内容如下所示: var getXmlHttpRequest = function () { t ...
猜你喜欢