php+ajax实现无刷新文件上传功能(ajaxuploadfile)


Posted in PHP onFebruary 11, 2018

本文实例为大家分享了php+ajax实现无刷新文件上传的具体代码,供大家参考,具体内容如下

文件上传的表单格式

<form id="uploadform" enctype="multipart/form-data" name="uploadform" method="post" >
  <input id="fileToUpload" type="file" name="fileToUpload" class="uploadinput" >
  <input id="add_file" type="button" value="提交">
</form>

AjaxFileUpload实现文件异步上传效果更好,使用简单:

<!DOCTYPE html>
 <html>
  <head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="http://www.phpddt.com/usr/themes/dddefault/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="ajaxfileupload.js"></script>
  </head>
 <script>
 jQuery(function(){ 
  $("#buttonUpload").click(function(){  
   //加载图标 
   /* $("#loading").ajaxStart(function(){
   $(this).show();
   }).ajaxComplete(function(){
   $(this).hide();
   });*/
   //上传文件
  $.ajaxFileUpload({
   url:'upload.php',//处理图片脚本
   secureuri :false,
   fileElementId :'fileToUpload',//file控件id
   dataType : 'json',
   success : function (data, status){
    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>
  <body>
   <input id="fileToUpload" type="file" size="20" name="fileToUpload" class="input">
   <button id="buttonUpload">上传</button>
  </body>
 </html>

上传还可以传递参数:

var data = { name: 'my name', description: 'short description' } 
  $.ajaxFileUpload({
   url: 'upload.php',
   secureuri: false,
   data: data,
   fileElementId: 'fileToUpload',
   dataType: 'json',
   success: function (data) {
    alert(data.msg);

   },
   error: function (data) {
    alert("error");
   }
  });

主要参数说明:

1、url表示处理文件上传操作的文件路径,可以测试URL是否能在浏览器中直接访问,如上:upload.php
2、fileElementId表示文件域ID,如上:fileToUpload
3、secureuri是否启用安全提交,默认为false
4、dataType数据数据,一般选json,javascript的原生态
5、success提交成功后处理函数
6、error提交失败处理函数

需要了解相关的错误提示

1、SyntaxError: missing ; before statement错误

如果出现这个错误就需要检查url路径是否可以访问

2,SyntaxError: syntax error错误

如果出现这个错误就需要检查处理提交操作的PHP文件是否存在语法错误

3、SyntaxError: invalid property id错误

如果出现这个错误就需要检查属性ID是否存在

4、SyntaxError: missing } in XML expression错误

如果出现这个错误就需要检查文件域名称是否一致或不存在

5、其它自定义错误

大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。

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

PHP 相关文章推荐
Optimizer与Debugger兼容性问题的解决方法
Dec 01 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
Jul 13 PHP
用Php编写注册后Email激活验证的实例代码
Mar 11 PHP
php中将一段数据存到一个txt文件中并显示其内容
Aug 15 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
Apr 07 PHP
学习php设计模式 php实现工厂模式(factory)
Dec 07 PHP
PHP编程之设置apache虚拟目录
Jul 08 PHP
php pdo操作数据库示例
Mar 10 PHP
Laravel网站打开速度优化的方法汇总
Jul 16 PHP
浅谈Yii乐观锁的使用及原理
Jul 25 PHP
laravel5.6实现数值转换
Oct 23 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
Feb 23 PHP
PHP实现的多维数组排序算法分析
Feb 10 #PHP
ThinkPHP整合datatables实现服务端分页的示例代码
Feb 10 #PHP
PHP实现APP微信支付的实例讲解
Feb 10 #PHP
PHP有序表查找之插值查找算法示例
Feb 10 #PHP
PHP有序表查找之二分查找(折半查找)算法示例
Feb 09 #PHP
php在windows环境下获得cpu内存实时使用率(推荐)
Feb 08 #PHP
PHP基于redis计数器类定义与用法示例
Feb 08 #PHP
You might like
PHP自动生成表单代码分享
2015/06/19 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
DOM 事件流详解
2015/01/20 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
django 发送手机验证码的示例代码
2018/04/25 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
荷兰超市:DEEN
2018/03/14 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
行政总监岗位职责
2013/12/05 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
新年主持词
2014/03/27 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
学校春季防火方案
2014/06/08 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript