php+ajax实现异步上传文件或图片功能

2021-06-06 17:44PajamaCat PHP教程

这篇文章主要为大家详细介绍了php+ajax实现异步上传文件或图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了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;

									 }

									}

									 ?>