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 相关文章推荐
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
Apr 18 PHP
PHP框架Swoole定时器Timer特性分析
Aug 19 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
Dec 18 PHP
PHP四舍五入、取整、round函数使用示例
Feb 06 PHP
php获取发送给用户的header信息的方法
Mar 16 PHP
PHP模板引擎smarty详细介绍
May 26 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
Aug 18 PHP
PHP自定义多进制的方法
Nov 03 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
Aug 15 PHP
php单元测试phpunit入门实例教程
Nov 17 PHP
PHP实现的大文件切割与合并功能示例
Apr 10 PHP
Laravel框架控制器的middleware中间件用法分析
Sep 30 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 DataGrid 实现代码
2009/08/12 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
php实现评论回复删除功能
2017/05/23 PHP
thinkphp分页集成实例
2017/07/24 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
获取body标签的两种方法
2011/10/13 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
详解JS数值Number类型
2018/02/07 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
举例讲解Python常用模块
2019/03/08 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
django有哪些好处和优点
2020/09/01 Python
python 怎样进行内存管理
2020/11/10 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS