AjaxFileUpload.js实现异步上传文件功能


Posted in Javascript onApril 19, 2019

做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax:

得到file的val,再post过去…

等真正实现的时候才发现,根本行不通。

于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件。

AjaxFileUpload

这个插件的原理是创建隐藏的表单和iframe,然后用JS去提交,获得返回值。

语法

$.ajaxFileUpload([options])

参数说明

url

上传处理程序地址。
fileElementId

  需要上传的文件域的ID,即的ID。
secureuri

  是否启用安全提交,默认为false。
dataType

  服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
success

提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
error

  提交失败自动执行的处理函数。
data

  自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
type

  当要提交自定义参数时,这个参数要设置成post

使用方法

引入jQuery与ajaxFileUpload插件(由api中心强力提供)

<script type="text/javascript" src="https://api.mayuko.cn/js/jquery.min.js"></script>
<script type="text/javascript" src="https://api.mayuko.cn/js/ajaxfileupload.js"></script>

扩展HTML代码

<td height="52" class="inputContent" ><div align="center">附件1
<input type="file" name="upload_file" id="ss_upload_file1"></td>
<td colspan="3"><input type="button" name="Submit3" value="上 传" class="button" id="ss_file_upload"></td>

JS代码

$("#ss_file_upload").click(function(){ 
 $.ajaxFileUpload({
 url:'doajaxfileupload.php',//请求地址
 secureuri:false,//是否需要安全协议
 fileElementId:'ss_upload_file1',//file的ID
 dataType: 'text',//返回值类型,一般为json
 success: function(img_data1)//成功后执行
 {
 $(ss_file1_url).attr("value",img_data1);
 alert("上传成功");
 },
 error:function(img_data1,status,e){ 
 alert("上传失败"); 
 }
 })
})

PHP代码

后台就是进行上传操作啦,因为是课程设计所以我将图片上传到了七牛云存储中。

如何上传到七牛中?

<?php
//echo var_dump($_FILES);
//echo $_FILES['upload_file']['tmp_name'];
$file_infor = array("status"=>'',"url"=>'');
require_once("qiniu/io.php");
require_once("qiniu/rs.php");
$bucket = "";//你的bucket
$key1 = $_FILES["upload_file"]["name"] ;
$accessKey = '';//AK
$secretKey = '';//SK
Qiniu_SetKeys($accessKey, $secretKey);
$putPolicy = new Qiniu_RS_PutPolicy($bucket);
$upToken = $putPolicy->Token(null);
$putExtra = new Qiniu_PutExtra();
$putExtra->Crc32 = 1;
list($ret, $err) = Qiniu_PutFile($upToken, $key1,$_FILES["upload_file"]["tmp_name"], $putExtra);
$url='bucket域名'.$key1;
if ($_FILES["upload_file"]["error"] > 0){
$file_infor["status"] = 'error';
}
else{
$file_infor["status"] = 'success';
$file_infor["url"] = $url;
}

echo $url;
?>

$_FILES是一个数组:

array (
‘upload_file' =>
array (
‘name' => ‘733626970332872971.jpg',
‘type' => ‘image/jpeg',
‘tmp_name' => ‘C:\\Windows\\Temp\\phpF203.tmp',
‘error' => 0,
‘size' => 210744,
),
)

这样前台就可以接收到上传图片之后的url值并进行显示操作了。

一般来说,AjaxFileUpload的返回类型是json格式,可是在测试的时候前台一直无法解析json数据,所以无解之后就换成text数据了。

错误提示

1.Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method ‘handleError'

这是因为高版本的jQuery中取消了handleError方法,在ajaxfileupload.js中加入该方法就可以啦。 ;)

handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}

// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
}

2.success: function(data)中data为空值

应该是json数据的问题,我的解决方法是设置返回数据的类型是 text,用alert(data +”:” + data.length); 观察返回的数据是否有效。

3.一直跳转到error方法中

当执行if(type==”json”) eval(“data = “+data);会抛出异常,导致在处理异常的时候将status = “error” 因此一直执行error方法。

将ajaxfileupload.js中uploadHttpData: function( r, type ) 方法的 eval(“data = “+data+” “)改为 eval(“data = \” “+data+” \” “);

4.SyntaxError: syntax error错误

检查处理提交操作的服务器后台处理程序是否存在语法错误。

5.change第二次失效

绑定change事件,实现选择图片后自动上传,但是触发一次change事件后,下次就不会再触发change事件。

原因:由于ajaxFileUpload把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了。

解决方法:在 $.ajaxFileUpload({option})中的回调函数里 重新绑定change事件。

$("#upload_file").change(function(){ 
 UploadImg();
});
UploadImg = function() {
 $(window).bind('beforeunload',function(){return '正在上传,确定离开此页面吗?';});
 $('#loading').attr('style','display:block;')
 $.ajaxFileUpload({
 url:'upload_ajax.php',
 secureuri:false,
 fileElementId:'upload_file',
 dataType: 'text',
 success: function(data)
 {
  $('#loading').attr('style','display:none;');
  if(data == 0){
   $("body").overhang({
   type: "error",
   message: "上传失败,CODE:00020"
   });
  }
  else if(data == 1){
   $("body").overhang({
   type: "success",
   message: "上传成功!"
   });
   setTimeout(function(){
      window.location.reload(); 
   },1000);

  }

  else{
   $("body").overhang({
   type: "error",
   message: "格式错误,仅支持jpg,png,gif"
   });
  }
  $(window).unbind('beforeunload');
  $("#upload_file").change(function () {
    UploadImg();
  });

 },
 error:function(data,status,e){ 
   $("body").overhang({
   type: "error",
   message: "上传失败,CODE:00031"
   });
 }
 })   
}

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

Javascript 相关文章推荐
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
原生js封装运动框架的示例讲解
Oct 01 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
读懂CommonJS的模块加载
Apr 19 #Javascript
js module大战
Apr 19 #Javascript
如何根据业务封装自己的功能组件
Apr 19 #Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 #Javascript
vue组件之间的数据传递方法详解
Apr 19 #Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 #Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 #Javascript
You might like
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
php实现水仙花数示例分享
2014/04/03 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
Python 学习笔记
2008/12/27 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python合并多个装饰器小技巧
2015/04/28 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python实现五子棋程序
2020/04/24 Python
python 实现两个npy档案合并
2020/07/01 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
化学专业毕业生自荐信
2013/11/15 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
2014春晚主持词
2014/03/25 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
个人求职自荐信范文
2015/03/06 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python