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 相关文章推荐
用文本作数据处理
Oct 09 PHP
php格式化工具Beautify PHP小小BUG
Apr 24 PHP
PHP三层结构(上) 简单三层结构
Jul 04 PHP
discuz程序的PHP加密函数原理分析
Aug 05 PHP
yii框架builder、update、delete使用方法
Apr 30 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
Jul 19 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
Aug 08 PHP
php中rename函数用法分析
Nov 15 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
Mar 15 PHP
PHP表单验证内容是否为空的实现代码
Nov 14 PHP
Yii框架布局文件的动态切换操作示例
Nov 11 PHP
PHP code 验证码生成类定义和简单使用示例
May 27 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中Session可能会引起并发问题
2015/07/23 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
js模仿jquery的写法示例代码
2013/06/16 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
python读取Excel实例详解
2018/08/17 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
Django分组聚合查询实例分享
2020/04/29 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
应届生个人求职信模板
2013/11/26 职场文书
分家协议书
2014/04/21 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python