通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同
前端文件-Jquery版本:
<form id="form" enctype="multipart/form-data" method="post">
<input type="text" name="desc" placeholder="文件名称"/><br/>
<input type="file" name="file" placeholder="文件"/>
<input type="button" id="submit" value="文件上传"/>
</form>
<script>
$('#submit').click(function () {
//Jquery对象转换为dom对象
var $form = $('#form');
var domForm = $form['0'];
//构建formData对象
var formData = new FormData(domForm);
formData.append('diycontent','我是自定义数据');
//异步上传文件
$.ajax({
url : 'file.php',
type : 'POST',
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头, jquery 会自动设置为multipart/form-data
contentType : false,
beforeSend:function(){
console.log('开始上传咯');
},
success : function(response) {
console.log(response)
},
error : function(response) {
console.log(response)
}
});
});
</script>前端文件-原生Javacript版本:
<form enctype="multipart/form-data" method="post" onsubmit="return upload()">
<input type="text" name="desc" placeholder="文件名称" /><br />
<input type="file" name="file" placeholder="文件" />
<input type="submit" value="文件上传" />
</form>
<script type="text/javascript">
var upload=function(){
//获取表单对象
form=document.forms[0];
//构建formData对象
formdata=new FormData(form);
formdata.append('diycontent','我是自定义数据');
//Ajax异步上传
var httper=new XMLHttpRequest();
httper.open('POST','file.php');
httper.onload=function(oEvent){
if(httper.status==200){
console.log('success');
console.log(httper.responseText);
}
else{
console.log('error');
}
}
httper.send(formdata);
return false;
}
</script>后端文件-PHP版本:
<?php
//文件上传
if(move_uploaded_file($_FILES['file']['tmp_name'], $_FILES["file"]["name"])){
//记录日志
$str='文件名:'.$_FILES['file']['tmp_name'].'--文件介绍:'.$_POST['desc'].'--Formdata追加的字段值:'.$_POST['diycontent'];
file_put_contents('log/'.time().'.txt',$str);
//让前端控制台输出看
echo $str;
}附件下载:
