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制作静态网站的模板框架(一)
Oct 09 PHP
一个简单的php加密解密函数(动态加密)
Jun 19 PHP
修改Laravel5.3中的路由文件与路径
Aug 10 PHP
php微信公众平台开发之微信群发信息
Sep 13 PHP
PHP简单预防sql注入的方法
Sep 27 PHP
CI框架数据库查询缓存优化的方法
Nov 21 PHP
Laravel中Facade的加载过程与原理详解
Sep 22 PHP
PHP如何搭建百度Ueditor富文本编辑器
Sep 21 PHP
PHP date()格式MySQL中插入datetime方法
Jan 29 PHP
php实现映射操作实例详解
Oct 02 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
Feb 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生成Gif图片验证码
2013/10/27 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python 阶乘累加和的实例
2019/02/01 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python__name__原理及用法详解
2019/11/02 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
中专自荐信
2013/10/13 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python