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分页显示制作详细讲解
Nov 19 PHP
PHP 翻页 实例代码
Aug 07 PHP
PHP 开发环境配置(Zend Studio)
Apr 28 PHP
PHP防CC攻击实现代码
Dec 29 PHP
input file获得文件根目录简单实现
Apr 26 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
Jun 30 PHP
标准PHP的AES加密算法类
Mar 12 PHP
PHP输入流php://input实例讲解
Dec 22 PHP
PHP实现文件上传功能实例代码
May 18 PHP
thinkPHP通用控制器实现方法示例
Nov 23 PHP
详解Yaf框架PHPUnit集成测试方法
Dec 27 PHP
php如何比较两个浮点数是否相等详解
Feb 12 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
php技巧小结【推荐】
2017/01/19 PHP
JS控制表格隔行变色
2006/06/26 Javascript
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
python显示生日是星期几的方法
2015/05/27 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
英文版银行求职信
2013/10/09 职场文书
《赶海》教学反思
2014/04/20 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
争先创优个人总结
2015/03/04 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript