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; } } ?>

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

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

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。