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获取QueryString的方法小结
Feb 28 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
js实现随机点名程序
Sep 17 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
vant中的toast层级改变操作
Nov 04 Javascript
Vue实现简单计算器
Jan 20 Vue.js
读懂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实现zip文件解压操作
2015/11/03 PHP
PHP内置加密函数详解
2016/11/20 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
JavaScript中的值类型详细介绍
2014/12/29 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python匿名函数的使用方法解析
2019/10/10 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
学生会竞选自荐信
2013/10/12 职场文书
社区活动邀请函范文
2014/01/29 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
环保倡议书400字
2014/05/15 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
女生抽烟检讨书
2014/10/05 职场文书
2015年实习单位评语
2015/03/25 职场文书
军训结束新闻稿
2015/07/17 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android