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 相关文章推荐
十天学会php(1)
Oct 09 PHP
发款php蜘蛛统计插件只要有mysql就可用
Oct 12 PHP
PHP 验证码的实现代码
Jul 17 PHP
Codeigniter实现智能裁剪图片的方法
Jun 12 PHP
PHP中round()函数对浮点数进行四舍五入的方法
Nov 19 PHP
PHP实现动态柱状图改进版
Mar 30 PHP
php数字运算验证码的实现代码
Jul 30 PHP
thinkPHP多语言切换设置方法详解
Nov 11 PHP
thinkPHP中验证码的简单实现方法
Dec 05 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
Oct 06 PHP
PHP常见过waf webshell以及最简单的检测方法
May 21 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
Oct 30 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入门
2006/10/09 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
管理信息系学生的自我评价
2014/01/11 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
高中语文课后反思
2014/04/27 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
夫妻吵架保证书
2015/05/08 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
python如何为list实现find方法
2022/05/30 Python