总的来说和原生XHR上传差不多,就是JQ有一个属性会帮助怎们进行编码,因为文件传输要遵循长文本HTTP规范,只有编码后才能传输
我是把便把过程放在form这一块了 因为form表单有 enctype 这个属性,这只了就可以帮助咱们把文件进行编码了,如果JQ再一次的编码,那就麻烦了
所以总结一下:如果你的form里面写了 enctype="multipart/form-data" JQ中这两个属性就要这样写processData: false, contentType: false
如果你的form表单没有使用 enctype="multipart/form-data" JQ就要这样写
processData: false, //jquery 是否对数据进行 预处理 contentType: "multipart/form-data" // 不要自己修改请求内容类型
话不多说直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
<form id="form1" action="" method="post" enctype="multipart/form-data"> // encype 是文件转码
<input type="file" name="upfile" id="upfile" value="" />
<input type="button" value="上传" id="btn"/>
</form>
</body>
<script type="text/javascript"> $("#btn").click(function(){ var formData = new FormData(); formData.append("pic",document.getElementById("upfile").files[0]); $.ajax({ type: "POST", // 数据提交类型
url: "upfile.php", // 发送地址
data: formData, //发送数据
async: true, // 是否异步
processData: false, //processData 默认为false,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
contentType: false // }); }); </script>
</html>
php代码
<?php if(!empty($_FILES)){ echo "来了"; moveFile($_FILES["pic"]); } //将文件移动到指定的目录下相对目录 function moveFile($upload){ if(!is_dir("images")){ // is_dir(file)函数判断指定的文件夹是否存在 file 是一个相对路径 mkdir("images"); // mkdir()函数创建文件夹 } if(is_uploaded_file($upload['tmp_name'])){ // 判断上传是不是通过HTTP POST上传的 $str=stristr($upload['name'],'.'); // 获取文件后缀名称 $path="images/".$upload["name"]; // 定义上传文件的存储位置 if(move_uploaded_file($upload['tmp_name'],$path)){ // 执行文件上传操作 return $path; // 返回文件路径 }else{ return false; //上传不成功返回false } } } ?>