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


Posted in Javascript onDecember 30, 2016

最近在研究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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
js实现表格字段排序
Feb 19 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
浅谈JavaScript的函数及作用域
Dec 30 #Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 #Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 #Javascript
浅谈js script标签中的预解析
Dec 30 #Javascript
jQuery实现页面顶部下拉广告
Dec 30 #Javascript
jQuery Password Validation密码验证
Dec 30 #Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
在线短消息收发的程序,不用数据库
2006/10/09 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
php创建多级目录的方法
2015/03/24 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
详解js文件通过python访问数据库方法
2019/03/03 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
大学生社会实践评语
2014/04/25 职场文书
入股协议书范本
2014/11/01 职场文书
2014年终个人工作总结
2014/11/07 职场文书
晚会开幕词
2015/01/28 职场文书
民事代理词范文
2015/05/25 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS