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去了。

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

Javascript 相关文章推荐
Javascript学习笔记2 函数
Jan 11 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 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
You might like
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
对python生成业务报表的实例详解
2019/02/03 Python
opencv与numpy的图像基本操作
2019/03/08 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python基于win32api实现键盘输入
2020/12/09 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
实习生的自我评价
2014/01/08 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
幼师自荐信范文
2015/03/06 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
Python sklearn分类决策树方法详解
2022/09/23 Python