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 echo 输出字符串函数详解
May 13 PHP
使用配置类定义Codeigniter全局变量
Jun 12 PHP
php简单socket服务器客户端代码实例
May 18 PHP
PHP实现简单搜歌的方法
Jul 28 PHP
PHP可变变量学习小结
Nov 29 PHP
PHP浮点数的一个常见问题
Mar 10 PHP
php blowfish加密解密算法
Jul 02 PHP
php版微信返回用户text输入的方法
Nov 14 PHP
PHP实现支付宝即时到账功能
Dec 21 PHP
PHP实现简单计算器小程序
Aug 28 PHP
PHP PDOStatement::fetchObject讲解
Feb 01 PHP
Laravel find in set排序实例
Oct 09 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
Display SQL Server Version Information
2007/06/21 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
js中日期的加减法
2015/05/06 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python实现从字典中删除元素的方法
2015/05/04 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
python能否java成为主流语言吗
2020/06/22 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
腾讯公司的一个sql题
2013/01/22 面试题
意向协议书范本
2014/04/23 职场文书
环保标语口号
2014/06/13 职场文书
球队口号
2014/06/18 职场文书
数学教研活动总结
2014/07/02 职场文书
党小组意见范文
2015/06/08 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS