ajax multipart post请求不同content-type实现

ajax multipart post请求不同content-type实现

1. 上传api接口

1) 这里通过php实现。

获取到上传文件的参数 通过 $_FILES 。 名称，大小，临时文件地址。

2) 将上传的临时文件地址，移动到对应的位置。

因为这里我们用multipart post的不仅仅是一个文件，还有其他的text/plain 的参数。 所以需要对 $_POST的参数同时进行处理。

$uploaddir=$_POST['uploaddir']; #post 参数
$uploadfile=$uploaddir..basename($filename); #要上传到的位置

if(move_uploaded_file($_FILES['appfile']['tmp_name'],$uploadfile))
{
echo "上传成功";
}

3) 前端实现

html 代码

<form id="uploadForm" action="upload.php" enctype="multipart/form-data" method="post">选择文件: <input accept=".apk" name="appfile" type="file" />
平台:<select name="type">
<option value="android">ANDROID</option>
<option value="ios">IOS</option>
</select>上传位置:<input name="uploaddir" type="text" placeholder="/tmp" /><input id="upload" type="submit" value="提交" />
</form>

js 代码

<script>
$(document).ready(function(){ 
$('#upload').on('click',function(e) { 
e.preventDefault(); 
var fd = new FormData(); 
fd.append( 'uploaddir', $('[name="uploaddir"]').val()); 
fd.append( 'appfile', $('[name="appfile"]')[0].files[0]); 
$.ajax(
{ url: '/ota/api/upload.do', 
data: fd, 
processData: false,  // false
contentType: false,  // false 
type: 'POST', 
success: function(data){ 
console.log(data); var message=JSON.parse(data); console.log(message.message); $('#message').removeClass("invisible"); $('#message').text(message.message); //console.log(message.message); //alert(data); //alert(typeof(message)); } }); });
</script>

4) http post请求的数据包

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Content-Length:2331
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryhujiiFNdVbpaFveW
Cookie:sid=ca71b3584fee60ade011b7bbaf6fc11c; PHPSESSID=ket2g413267ug0fhq9aggnnnq4
Host:qa.heika.com
Origin:http://example.com
Referer:http://example.com/ota/upload.do
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36
Request Payload
------WebKitFormBoundaryhujiiFNdVbpaFveW
Content-Disposition: form-data; name="appfile"; filename="test.apk"
Content-Type: application/octet-stream

[actual file content here!]
------WebKitFormBoundaryhujiiFNdVbpaFveW
Content-Disposition: form-data; name="uploaddir"

/tmp/

此篇文章已被阅读3158 次