首页
所有分类
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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
FireFox JavaScript全局Event对象
Jun 14 Javascript
JS window.opener返回父页面的应用
Oct 24 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
JsRender实用入门教程
Oct 31 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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
道歉信(39) 证婚词(21) 介绍信(57) 心得体会(660) 演讲稿(869) 创业计划书(312) 职业生涯规划书(234) 欢迎词(65) 思想汇报(404) 岗位职责(1324)
You might like
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
小谈php正则提取图片地址
2014/03/27 PHP
PHP缓冲区用法总结
2016/02/14 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
基于HTML5上使用iScroll实现下拉刷新，上拉加载更多
2016/05/21 Javascript
js实现文字截断功能
2016/09/14 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
js实现随机点名
2021/01/19 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python的多重继承的理解
2017/08/06 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python模块导入的细节详解
2018/12/10 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python 列表推导式使用详解
2019/08/29 Python
python是否适合网页编程详解
2019/10/04 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
材料物理专业大学毕业生求职信
2013/10/15 职场文书
班组长岗位职责
2014/03/03 职场文书
个人主要事迹材料
2014/08/26 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书