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如何得到当前页和上一页的地址?
Nov 27 PHP
PHP XML备份Mysql数据库
May 27 PHP
php 文件上传实例代码
Apr 19 PHP
PHP数据类型之整数类型、浮点数的介绍
Apr 28 PHP
PHP命名空间(Namespace)的使用详解
May 04 PHP
深入PHP nl2br()格式化输出的详解
Jun 05 PHP
非常重要的php正则表达式详解
Jan 04 PHP
Apache无法自动跳转却显示目录的解决方法
Nov 30 PHP
浅谈thinkphp5 instance 的简单实现
Jul 30 PHP
CakePHP框架Model关联对象用法分析
Aug 04 PHP
php strftime函数获取日期时间(switch用法)
May 16 PHP
laravel框架使用极光推送消息操作示例
Feb 15 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者的疑难问答(1)
2006/10/09 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python yield 小结和实例
2014/04/25 Python
python中的二维列表实例详解
2018/06/19 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python中format()格式输出全解
2019/04/12 Python
django中forms组件的使用与注意
2019/07/08 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python中Selenium模块的使用详解
2020/10/09 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
招聘单位介绍信
2014/01/14 职场文书
学生会招新策划书
2014/02/14 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
活动倡议书范文
2014/05/13 职场文书
星级党支部申报材料
2014/05/31 职场文书
代领毕业证委托书
2014/08/02 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏