基于ajax实现上传图片代码示例解析


Posted in Javascript onDecember 03, 2020

js源码:

/// <reference path="jquery-1.8.3.js" /> 
/// <reference path="ajaxForm/jquery.form.js" /> 
 
/*! 
 * jQuery upload 
 * 用于上传单个文件,上传成功后,返回文件路径。 
 * 本插件依赖jQuery,jquery.form 请在使用时引入依赖的文件 
 * 
 * Date: 2014/4/23 
 */ 
/* 
使用: 
html: 
<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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
微信小程序实现点赞业务
Feb 10 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 #jQuery
WebPack工具运行原理及入门教程
Dec 02 #Javascript
Vue router安装及使用方法解析
Dec 02 #Vue.js
js前端对于大量数据的展示方式及处理方法
Dec 02 #Javascript
vue3.0中setup使用(两种用法)
Dec 02 #Vue.js
JavaScript 如何在浏览器中使用摄像头
Dec 02 #Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 #Vue.js
You might like
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
python中defaultdict的用法详解
2017/06/07 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
药学专业个人的自我评价
2013/12/31 职场文书
环保专项行动方案
2014/05/12 职场文书
工商管理本科生求职信
2014/07/13 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
2014年销售部工作总结
2014/12/01 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
会计稽核岗位职责
2015/04/13 职场文书
行政处罚告知书
2015/07/01 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python