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 相关文章推荐
用sql命令修改数据表中的一个字段为非空(not null)的语句
Jun 04 PHP
PHP中使用cURL实现Get和Post请求的方法
Mar 13 PHP
『PHP』PHP截断函数mb_substr()使用介绍
Apr 22 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
Apr 23 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
Sep 27 PHP
ThinkPHP 表单自动验证运用示例
Oct 13 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
Jun 23 PHP
PHP使用CURL模拟登录的方法
Jul 08 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
Oct 21 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
Dec 25 PHP
php HTML无刷新提交表单
Apr 05 PHP
Yii 2.0在Grid中格式化时间方法示例
Jun 06 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
js判断是否是手机页面
2017/03/17 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python 中的 else详解
2016/04/23 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
区分python中的进程与线程
2020/08/13 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
护士感人事迹
2014/05/01 职场文书
公民授权委托书范本
2014/09/17 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
任命书格式模板
2015/09/22 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL