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 相关文章推荐
jquery下json数组的操作实现代码
Aug 09 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Bootstrap Table 删除和批量删除
Sep 22 Javascript
node thread.sleep实现示例
Jun 20 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
vue实现多级菜单效果
Oct 19 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中的一个中文字符串截取函数
2007/02/14 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
python 获取et和excel的版本号
2009/04/09 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
简述Python2与Python3的不同点
2018/01/21 Python
python实现图片文件批量重命名
2020/03/23 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
Django如何将URL映射到视图
2019/07/29 Python
Python图片的横坐标汉字实例
2019/12/04 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
中文专业毕业生自荐书范文
2014/01/04 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
幽灵公主观后感
2015/06/09 职场文书
返乡农民工证明
2015/06/24 职场文书
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫