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 相关文章推荐
ASP知识讲座四
Oct 09 PHP
Linux下手动编译安装PHP扩展的例子分享
Jul 15 PHP
php实现的CSS更新类实例
Sep 22 PHP
PHP中mysql_field_type()函数用法
Nov 24 PHP
smarty内置函数config_load用法实例
Jan 22 PHP
php+mysqli事务控制实现银行转账实例
Jan 29 PHP
PHP+jQuery+Ajax实现用户登录与退出
Apr 27 PHP
smarty模板判断数组为空的方法
Jun 10 PHP
谈谈php对接芝麻信用踩的坑
Dec 01 PHP
PHP面向对象程序设计之多态性的应用示例
Dec 19 PHP
PHP实现读取文件夹及批量重命名文件操作示例
Apr 15 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
Feb 10 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
在vscode中配置python环境过程解析
2019/09/28 Python
NumPy统计函数的实现方法
2020/01/21 Python
keras 权重保存和权重载入方式
2020/05/21 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
彻底解决Python包下载慢问题
2020/11/15 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
Skyscanner波兰:廉价航班
2017/11/07 全球购物
三个Unix的命令面试题
2015/04/12 面试题
文言文形式的学生求职信
2013/12/03 职场文书
领导视察欢迎词
2014/01/15 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
教师群众路线心得体会
2014/11/04 职场文书