设为首页收藏本站

 找回密码
 注册论坛

QQ登录

只需一步,快速开始

用百度帐号登录

只需两步,快速登录

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 257|回复: 0

jQuery插件ajaxFileUpload使用实例解析

[复制链接]

签到天数: 36 天

[LV.5]常住居民I

发表于 2016/11/4 15:16 | 显示全部楼层 |阅读模式 |Google Chrome 45.0.2454.101|Windows 7
天涯海角搜一下: 百度 谷歌 360 搜狗 有道 雅虎 必应 即刻
  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插件。注意先后顺序,这个不用说了,所有的插件都是这样。

  ?

  1

  2

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

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

  第二步:HTML代码:

  ?

  1

  2

  3

  4

  5

  <body>

  <p><input type="file" id="file1" name="file" /></p>

  <input type="button" value="上传" />

  <p><img id="img1" alt="上传成功啦" src="" /></p>

  </body>

  第三步:JS代码

  ?

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

  16

  17

  18

  19

  20

  21

  22

  23

  24

  25

  26

  27

  28

  29

  30

  31

  32

  33

  34

  35

  36

  <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代码:

  ?

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

  16

  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 + "www.9ask.cn/xiamen/',imgurl:'" + imgurl + "'}";

  Response.Write(res);

  Response.End();

  }

  }
欢迎光临IT技术交流论坛:http://bbs.itzmx.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册论坛 用百度帐号登录新浪微博账号登陆

本版积分规则

手机版|Archiver|Mail me|网站地图|IT技术交流论坛 ( 闽ICP备13013206号-7 )

GMT+8, 2018/6/21 00:49 , Processed in 0.276841 second(s), 42 queries , Gzip On, Memcache On.

Powered by itzmx!

© 2011-2018 sakura

快速回复 返回顶部 返回列表