首页
所有分类
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 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
JavaScript实现抖音罗盘时钟
Oct 11 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
RP2100(1) PL450(1) GF515(1) BCL3000(2) ICF-SW7600(1) 低放电路(1) 乐信(1) H-501(1) PL550(1) SHARP(1)
You might like
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
JavaScript 参考教程
2006/12/29 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
JavaScript插件化开发教程 （四）
2015/01/27 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
webpack4简单入门实例
2018/09/06 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python的缺点和劣势分析
2019/11/19 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
Dr. Martens马汀博士官网：马丁靴始祖品牌
2016/10/15 全球购物
丹麦优惠购物网站：PLUSSHOP
2019/03/24 全球购物
Python文件操作的面试题
2013/06/22 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
大学专科生推荐信范文
2013/11/23 职场文书
品质标语大全
2014/06/21 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
法定代表人身份证明书（含说明）
2014/10/02 职场文书
安全先进班组材料
2014/12/26 职场文书
民事答辩状范本
2015/05/21 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL