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 相关文章推荐
关于BIG5-HKSCS的解决方法
Mar 20 PHP
php visitFile()遍历指定文件夹函数
Aug 21 PHP
php实现单链表的实例代码
Mar 22 PHP
mac下安装nginx和php
Nov 04 PHP
PHP中source #N问题的解决方法
Jan 27 PHP
php中动态调用函数的方法
Mar 16 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
Sep 25 PHP
深入解析PHP中foreach语句控制数组循环的用法
Nov 30 PHP
Netbeans 8.2与PHP相关的新特性介绍
Oct 08 PHP
PHP面向对象程序设计类的定义与用法简单示例
Dec 27 PHP
PHP编程实现的TCP服务端和客户端功能示例
Apr 13 PHP
详解php协程知识点
Sep 21 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生成自定义长度随机字符串的函数分享
2014/05/04 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
学习React中ref的两个demo示例
2018/08/14 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
翻译专业应届生求职信
2013/11/23 职场文书
售后专员岗位职责
2013/12/08 职场文书
工作推荐信范文
2014/05/10 职场文书
初中学生操行评语
2014/12/26 职场文书
八年级物理教学反思
2016/02/19 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android