ajax实现文件上传（ajax提交form表单上传文件）

孙小伟优秀作者

原创内容来源：小居数码网时间：2024-08-12 17:06:01 阅读() 收藏：48 分享：61 爆

导读：您正在阅读的是关于【数码知识】的问题，本文由科普作家协会，生活小能手，著名生活达人等整理监督编写。本文有825个文字，大小约为3KB，预计阅读时间3分钟。

IE浏览器版本最好为：IE10+，因为 FormData 兼容性问题

ajax提交form表单上传文件

然后查看示例，代码如下↓

html 代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
#showimg{margin-top: 20px;height: 150px;}
#showimg div{width: 100px;height: 100px;line-height:100px;margin-right: 20px;float: left;text-align: center;}
#showimg img{vertical-align: middle;max-width: 100%;max-height: 100%;}
</style>
<script type="text/javascript">
jQuery(function () {
jQuery('#butSubmit').click(function () {
var file = jQuery('#fileId')[0].files;
var formDataInfo = new FormData(jQuery('#FormDataUpload')[0]);
formDataInfo.append('file',file);//表单数据
formDataInfo.append('ajajxfile', 1);//额外加数据
/*------分割线------*/
// var formDataInfo = new FormData();
// formDataInfo.append('pic', jQuery("#picId")[0].files[0]);
// formDataInfo.append('ajajxfile', 1);//额外加数据
//jQuery.each(jQuery("#fileId")[0].files,function (k,val) {
// formDataInfo.append('fileimg[]', val);
// });
// alert(formData);
jQuery.ajax({
type:'post',
url:'upload.php',
dataType:'json',
cache:false,
processData:false,//必须
contentType:false,//必须
data:formDataInfo,
success:function (data) {
// alert(data);
var html = '';
for (var i=0;i<data.length;i++){
html +='<div><img src="'+data[i]+'"></div>';
}
jQuery('#showimg').html(html);
},
error:function () {
alert('Error');
}
});
});
});
</script>
</head>
<body>
<br>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input name="img[]" type="file" multiple>
<input type="button" value="提交" >
</form>
<div ></div>
</body>
</html>