基于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 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 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
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
JBL英国官网:JBL UK
2018/07/04 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
企业党员个人自我评价
2014/09/20 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
建国大业观后感600字
2015/06/01 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers