C# MVC中使用JQuery插件ajaxFileUpload上传文件

ajaxFileUpload简介

ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件，使用过程中发现很多与这个同名的，基于原始版本基础之上修改过的插件，文件版本比较多，我把我自己使用的ajaxFileUpload文件上传上了，想要使用的朋友可以下载：https://download.csdn.net/download/weixin_43951530/81133954。

ajaxFileUpload使用说明：

ajaxFileUpload的使用也很简单，调用ajaxFileUpload方法即可，各配置项详细说明如下：

---

$.ajaxFileUpload({
   type: "post",       //请求类型：post或get,当要使用data提交自定义参数时一定要设置为post
   url: "/Shared/Upload",     //文件上传的服务器端请求地址
   secureuri: false,      //是否启用安全提交，一般默认为false就行，不用特殊处理
   fileElementId: "filePicture",   //文件上传控件的id <input type="file" id="filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" οnchange="filePictureChange()" />
   dataType: "json",      //返回值类型，一般设置为json，还支持html\xml\script类型
   data: { "id": "1", "name": "test" }, //用于post请求提交自定义参数
   success: function (data, status) {  //服务器成功响应处理函数
   },
   error: function (data, status, e) { //服务器响应失败处理函数
   }
  });

首先在页面添加对JQuery及ajaxFileUpload的引用，这里的JQuery用的2.1.4版本，经测试用各个版本基本没什么影响。

<script src="../../Content/js/jquery-2.1.4.min.js"></script>
<script src="../../Content/js/ajaxfileupload.js"></script>

页面添加类型为file的input标签

<input type="file" id="filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" />

通过accept可以限定打开文件选择对话框后，默认能选择的文件类型。

---

ajaxFileUpload使用过程中的一些问题：

1.jQuery.handleError is not a function 2.提交form表单后，后端执行成功，并返回 200 success但是ajax回调函数进入error中

---

解决方案：

经测试handlerError只在jquery-1.4.2之前的版本中存在，以后版本中都没有这个函数了，因此在将handleError这个函数复制到ajaxFileUpload.js中，就行了

 uploadHttpData: function (r, type) {
  var data = !type;
  data = type == "xml" || data ? r.responseXML : r.responseText;
  // If the type is "script", eval it in global context
  if (type == "script")
   jQuery.globalEval(data);
  // Get the JavaScript object, if JSON is used.
  if (type == "json")
   eval("data = " + data);
   //eval("data = \"" + data + "\"");
  // evaluate scripts within html
  if (type == "html")
   jQuery("<div>").html(data).evalScripts();

  return data;
 },
 handleError: function (s, xhr, status, e) {
  // If a local callback was specified, fire it
  if (s.error) {
   s.error.call(s.context || s, xhr, status, e);
  }

  // Fire the global callback
  if (s.global) {
   (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
  }
 }

文件中的js已经是修改后的,下载后可以直接使用。
以上就是本文的全部内容，希望对大家的学习有所帮助。