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

jQuery插件ajaxFileUpload使用实例解析

Posted in Javascript onOctober 19, 2016

ajaxFileUpload.js 很多同名的，因为做出来一个很容易。
我用的是这个：https://github.com/carlcarl/AjaxFileUpload
下载地址在这里：http://xiazai.3water.com/201610/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 -

逆心

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

Javascript 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
Mar 25 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
使用Angular.js开发的注意事项
Oct 19 #Javascript
js表单登陆验证示例
Oct 19 #Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 #Javascript
Angular和百度地图的结合实例代码
Oct 19 #Javascript
Bootstrap Table使用方法解析
Oct 19 #Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 #Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 #Javascript
内置模块(1) 限流(2) 递归(1) 备份(2) update(2) tcp/ip(1) IP(1) 限速(1) 数据库卡死(1) 全局锁(1)
You might like
PHP 第二节 数据类型之转换
2012/04/28 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP count()函数讲解
2019/02/03 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
js实现表格字段排序
2014/02/19 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
深入理解JavaScript系列（18）：面向对象编程之ECMAScript实现
2015/03/05 Javascript
Java遍历集合方法分析（实现原理、算法性能、适用场合）
2016/04/25 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
python的几种开发工具介绍
2007/03/07 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python 正确保留多位小数的实例
2018/07/16 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
家佳咖啡店创业计划书
2013/12/27 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
家长通知书教师评语
2014/04/17 职场文书
师范类求职信
2014/06/21 职场文书
承租经营合作者协议书
2014/10/01 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
MySQL GTID复制的具体使用
2022/05/20 MySQL