首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery插件ajaxFileUpload使用详解

Posted in Javascript onJanuary 10, 2017

ajaxFileUpload.js 很多同名的，因为做出来一个很容易。

我用的是这个：https://github.com/carlcarl/AjaxFileUpload

下载地址在这里：http://xiazai.3water.com/201701/yuanma/ajaxfileupload(3water.com).rar

AjaxFileUpload.js并不是一个很出名的插件，只是别人写好的放出来供大家用，原理都是创建隐藏的表单和iframe然后用JS去提交，获得返回值。

当初做了个异步上传的功能，选择它因为它的配置方式比较像jQuery的AJAX，我很喜欢。

评论里面说到的不行。那是因为我们用的不是同一个js。我上github搜AjaxFileUpload出来很多类似js。

ajaxFileUpload是一个异步上传文件的jQuery插件。

传一个不知道什么版本的上来，以后不用到处找了。

语法：$.ajaxFileUpload([options])

options参数说明：

1、url

  上传处理程序地址。

2、fileElementId

　  需要上传的文件域的ID，即<input type="file">的ID。
3、secureuri

　 是否启用安全提交，默认为false。
4、dataType

　 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
5、success

提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
6、error

　 提交失败自动执行的处理函数。
7、data

　 自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
8、 type

　  当要提交自定义参数时，这个参数要设置成post

错误提示:

1、SyntaxError: missing ; before statement错误

如果出现这个错误就需要检查url路径是否可以访问

2、SyntaxError: syntax error错误

如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误

3、SyntaxError: invalid property id错误

如果出现这个错误就需要检查文本域属性ID是否存在

4、SyntaxError: missing } in XML expression错误

如果出现这个错误就需要检查文件name是否一致或不存在

5、其它自定义错误

大家可使用变量$error直接打印的方法检查各参数是否正确，比起上面这些无效的错误提示还是方便很多。

使用方法：

第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。

<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>

第二步：HTML代码：

<body>
 <p><input type="file" id="file1" name="file" /></p>
 <input type="button" value="上传" />
 <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

第三步：JS代码

<script src="jquery-1.7.1.js" type="text/javascript"></script>
 <script src="ajaxfileupload.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 $(":button").click(function () {
 ajaxFileUpload();
 })
 })
 function ajaxFileUpload() {
 $.ajaxFileUpload
 (
 {
  url: '/upload.aspx', //用于文件上传的服务器端请求地址
  secureuri: false, //是否需要安全协议，一般设置为false
  fileElementId: 'file1', //文件上传域的ID
  dataType: 'json', //返回值类型 一般设置为json
  success: function (data, status) //服务器成功响应处理函数
  {
  $("#img1").attr("src", data.imgurl);
  if (typeof (data.error) != 'undefined') {
  if (data.error != '') {
  alert(data.error);
  } else {
  alert(data.msg);
  }
  }
  },
  error: function (data, status, e)//服务器响应失败处理函数
  {
  alert(e);
  }
 }
 )
 return false;
 }
 </script>

第四步：后台页面upload.aspx代码：

protected void Page_Load(object sender, EventArgs e)
 {
 HttpFileCollection files = Request.Files;
 string msg = string.Empty;
 string error = string.Empty;
 string imgurl;
 if (files.Count > 0)
 {
 files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
 msg = " 成功! 文件大小为:" + files[0].ContentLength;
 imgurl = "/" + files[0].FileName;
 string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
 Response.Write(res);
 Response.End();
 }
 }

本实例完整代码下载

来一个MVC版本的实例：

控制器代码

public class HomeController : Controller
 {
 public ActionResult Index()
 {
 return View();
 }

 public ActionResult Upload()
 {
 HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
 string imgPath = "";
 if (hfc.Count > 0)
 {
 imgPath = "/testUpload" + hfc[0].FileName;
 string PhysicalPath = Server.MapPath(imgPath);
 hfc[0].SaveAs(PhysicalPath);
 }
 return Content(imgPath);
 }
 }

前端视图，HTML与JS代码，成功上传后，返回图片真实地址并绑定到<img>的SRC地址

<html>
<head>
 <script src="/jquery-1.7.1.js" type="text/javascript"></script>
 <script src="/ajaxfileupload.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 $(":button").click(function () {
 if ($("#file1").val().length > 0) {
  ajaxFileUpload();
 }
 else {
  alert("请选择图片");
 }
 })
 })
 function ajaxFileUpload() {
 $.ajaxFileUpload
 (
 {
  url: '/Home/Upload', //用于文件上传的服务器端请求地址
  secureuri: false, //一般设置为false
  fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" />
  dataType: 'HTML', //返回值类型 一般设置为json
  success: function (data, status) //服务器成功响应处理函数
  {
  alert(data);
  $("#img1").attr("src", data);
  if (typeof (data.error) != 'undefined') {
  if (data.error != '') {
  alert(data.error);
  } else {
  alert(data.msg);
  }
  }
  },
  error: function (data, status, e)//服务器响应失败处理函数
  {
  alert(e);
  }
 }
 )
 return false;
 }
 </script>
</head>
<body>
 <p><input type="file" id="file1" name="file" /></p>
 <input type="button" value="上传" />
 <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>

 最后再来一个上传图片且附带参数的实例：控制器代码：

public class HomeController : Controller
 {
 public ActionResult Index()
 {
 return View();
 }

 public ActionResult Upload()
 {
 NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;

 HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
 string imgPath = "";
 if (hfc.Count > 0)
 {
 imgPath = "/testUpload" + hfc[0].FileName;
 string PhysicalPath = Server.MapPath(imgPath);
 hfc[0].SaveAs(PhysicalPath);
 }
 //注意要写好后面的第二第三个参数
 return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
 }
 }

Index视图代码:

<html>
<head>
 <script src="/jquery-1.7.1.js" type="text/javascript"></script>
 <script src="/ajaxfileupload.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
 $(":button").click(function () {
 if ($("#file1").val().length > 0) {
  ajaxFileUpload();
 }
 else {
  alert("请选择图片");
 }
 })
 })
 function ajaxFileUpload() {
 $.ajaxFileUpload
 (
 {
  url: '/Home/Upload', //用于文件上传的服务器端请求地址
  type: 'post',
  data: { Id: '123', name: 'lunis' }, //此参数非常严谨，写错一个引号都不行
  secureuri: false, //一般设置为false
  fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" />
  dataType: 'json', //返回值类型 一般设置为json
  success: function (data, status) //服务器成功响应处理函数
  {
  alert(data);
  $("#img1").attr("src", data.imgPath1);
  alert("你请求的Id是" + data.Id + " " + "你请求的名字是:" + data.name);
  if (typeof (data.error) != 'undefined') {
  if (data.error != '') {
  alert(data.error);
  } else {
  alert(data.msg);
  }
  }
  },
  error: function (data, status, e)//服务器响应失败处理函数
  {
  alert(e);
  }
 }
 )
 return false;
 }
 </script>
</head>
<body>
 <p><input type="file" id="file1" name="file" /></p>
 <input type="button" value="上传" />
 <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>

此实例在显示出异步上传图片的同时并弹出自定义传输的参数。本实例下载地址

2013年1月28日，今天调试过程中发现一个问题，就是作为文件域(<input type="file">)必须要有name属性，如果没有name属性，上传之后服务器是获取不到图片的。如：正确的写法是<input type="file" id="file1" name="file1" />

2013年1月28日，最经典的错误终于找到原因所在了。Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError'，这个是google浏览器报的错误，非常经典， 不知道是我的版本问题还是真正存在的问题。这个问题的根源经过N次上传才找到问题的根本所在。答案是：dataType参数一定要大写。如：dataType: 'HTML'。

2016-07-28，评论中的一个错误：TypeError: $.ajaxFileUpload is not a function   我们用的不是同一个JS，你下了别的AJAXFileUpload去了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery插件ajaxFileUpload使用详解

- Author -

Denghejing

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
最近项目写了一些js，水平有待提高
Jan 31 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
react MPA 多页配置详解
Oct 18 Javascript
JS实现鼠标移动拖尾
Dec 27 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
微信小程序 Button 组件详解及简单实例
Jan 10 #Javascript
jQuery zTree树插件简单使用教程
Jan 10 #Javascript
详解JS中的快速排序与冒泡
Jan 10 #Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 #Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 #Javascript
js自定义QQ菜单效果
Jan 10 #Javascript
js实现将json数组显示前台table中
Jan 10 #Javascript
邀请函(127) 道歉信(39) 心得体会(660) 演讲稿(869) 证婚词(21) 介绍信(57) 表扬信(62) 检讨书(456) 欢迎词(65) 辞职信(98)
You might like
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
实现音乐播放器的代码（html5+css3+jquery）
2015/08/04 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
2016/11/30 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
Python中统计函数运行耗时的方法
2015/05/05 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Python如何对齐字符串
2020/07/30 Python
自主招生自荐信
2013/12/08 职场文书
行政专员岗位职责
2014/01/02 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
中秋节随笔
2015/08/15 职场文书
超市主管竞聘书
2015/09/15 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python