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递归列出所有文件和目录的代码
Sep 10 PHP
php GeoIP的使用教程
Mar 09 PHP
PHP开发者常犯的10个MySQL错误更正剖析
Jan 30 PHP
深入phpMyAdmin的安装与配置的详细步骤
May 07 PHP
对于PHP 5.4 你必须要知道的
Aug 07 PHP
php递归函数中使用return的注意事项
Jan 17 PHP
PHP中使用curl入门教程
Jul 02 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
May 29 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
Apr 09 PHP
PHP利用百度ai实现文本和图片审核
May 08 PHP
php常用的工具开发整理
Sep 26 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
Oct 08 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
浅析is_writable的php实现
2013/06/18 PHP
PHP分页类集锦
2014/11/18 PHP
thinkphp分页集成实例
2017/07/24 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
javascript自然分类法算法实现代码
2013/10/11 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
js style动态设置table高度
2014/10/21 Javascript
AngularJS内置指令
2015/02/04 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python中split方法用法分析
2015/04/17 Python
python2.7到3.x迁移指南
2018/02/01 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
网络维护中文求职信
2014/01/03 职场文书
付款委托书范本
2014/10/05 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
vscode内网访问服务器的方法
2022/06/28 Servers