php+ajax实现异步上传文件或图片功能


Posted in PHP onJuly 18, 2017

本文为大家分享了ajax异步上传文件或图片功能的具体代码,供大家参考,具体内容如下

//html代码

<form enctype="multipart/form-data" id="upForm">
 <input type="file" name="file" ><br><br>
 <input type="button" value="提交">
</form>
<div class="picDis">
 <img src="" alt="">
</div>
//js代码

(':button').click(function(event) {
//formdata储存异步上传数据
 var formData = new FormData($('form')[0]);
 formData.append('file',$(':file')[0].files[0]);
 //坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
 $.ajax({
  url:'formtest.php',
  type: 'POST',
  data: formData,
  //这两个设置项必填
  contentType: false,
  processData: false,
  success:function(data){
  console.log(data)
  var srcPath = data;
  console.log();
 //注意这里的路径要根据自己的储存文件的路径设置
  $('.picDis img').attr('src', '..'+srcPath);
  }
 })
 });

php:

<?php 

$upFile = $_FILES['file'];

/**
* 创建文件夹函数,用于创建保存文件的文件夹
* @param str $dirPath 文件夹名称
* @return str $dirPath 文件夹名称
*/
function creaDir($dirPath){
 $curPath = dirname(__FILE__);
 $path = $curPath.'\\'.$dirPath;
 if (is_dir($path) || mkdir($path,0777,true)) {
  return $dirPath;
 }
}

//判断文件是否为空或者出错
if ($upFile['error']==0 && !empty($upFile)) {
 $dirpath = creaDir('upload');
 $filename = $_FILES['file']['name'];
 $queryPath = './'.$dirpath.'/'.$filename;
 //move_uploaded_file将浏览器缓存file转移到服务器文件夹
 if(move_uploaded_file($_FILES['file']['tmp_name'],$queryPath)){
  echo $queryPath;
 }
}

 ?>

点击上传图片并发送后, 可以看到页面上显示出图片, 查看本地文件夹可以看到文件也已储存到服务器.

在客户端实现异步上传的关键在于FormData,关于这部分这里有详细介绍: FormData()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
针对初学PHP者的疑难问答(1)
Oct 09 PHP
PHP Ajax实现页面无刷新发表评论
Jan 02 PHP
PHP 反射机制实现动态代理的代码
Oct 22 PHP
让PHP显示Facebook的粉丝数量方法
Jan 08 PHP
Yii使用migrate命令执行sql语句的方法
Mar 15 PHP
微信支付的开发流程详解
Sep 13 PHP
PHP图像识别技术原理与实现
Oct 27 PHP
php获取指定数量随机字符串的方法
Feb 06 PHP
解析 thinkphp 框架中的部分方法
May 07 PHP
php支付宝系列之电脑网站支付
May 30 PHP
PhpStorm配置Xdebug调试的方法步骤
Feb 02 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
Feb 27 PHP
Joomla框架实现字符串截取的方法示例
Jul 18 #PHP
PHP新特性详解之命名空间、性状与生成器
Jul 18 #PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
Jul 18 #PHP
PHP基于XMLWriter操作xml的方法分析
Jul 17 #PHP
PHP基于DOMDocument解析和生成xml的方法分析
Jul 17 #PHP
PHP基于SimpleXML生成和解析xml的方法示例
Jul 17 #PHP
PHP实现限制IP访问及提交次数的方法详解
Jul 17 #PHP
You might like
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
vue实现购物车加减
2020/05/30 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Python简单基础小程序的实例代码
2019/04/28 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
python 回溯法模板详解
2020/02/26 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
法学院方阵解说词
2014/01/29 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
委托培训协议书
2014/11/17 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python