PHP and ajax implement asynchronous uploading of files or image code sharing

本文主要和大家详细介绍php+ajax实现异步上传文件或图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

//html代码

<form enctype="multipart/form-data" id="upForm">
 <input type="file" name="file" ><br><br>
 <input type="button" value="提交">
</form>
<p class="picDis">
 <img src="/static/imghwm/default1.png"  data-src="" alt="  class="lazy"   alt="">
</p>

//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[&#39;file&#39;];

/**
* 创建文件夹函数,用于创建保存文件的文件夹
* @param str $dirPath 文件夹名称
* @return str $dirPath 文件夹名称
*/
function creaDir($dirPath){
 $curPath = dirname(__FILE__);
 $path = $curPath.&#39;\\&#39;.$dirPath;
 if (is_dir($path) || mkdir($path,0777,true)) {
  return $dirPath;
 }
}

//判断文件是否为空或者出错
if ($upFile[&#39;error&#39;]==0 && !empty($upFile)) {
 $dirpath = creaDir(&#39;upload&#39;);
 $filename = $_FILES[&#39;file&#39;][&#39;name&#39;];
 $queryPath = &#39;./&#39;.$dirpath.&#39;/&#39;.$filename;
 //move_uploaded_file将浏览器缓存file转移到服务器文件夹
 if(move_uploaded_file($_FILES[&#39;file&#39;][&#39;tmp_name&#39;],$queryPath)){
  echo $queryPath;
 }
}

 ?>

点击上传图片并发送后, 可以看到页面上显示出图片, 查看本地文件夹可以看到文件也已储存到服务器.

在客户端实现异步上传的关键在于FormData,关于这部分这里有详细介绍: FormData()

相关推荐：

Ajax表单异步上传文件实例代码详解

利用jQuery异步上传文件的插件用法分享

Html完成异步上传文件的Jquery代码实例

The above is the detailed content of PHP and ajax implement asynchronous uploading of files or image code sharing. For more information, please follow other related articles on the PHP Chinese website!