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

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

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

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>

后台程序 PHP代码：

<?php
date_default_timezone_set('PRC');
if (!empty($_POST)){
if ($_FILES['img']['name'][0]){
$path = 'upload/';
if (!is_dir($path)){
mkdir(iconv("UTF-8", "GBK", $path),0777,true);
}
$datafile = $_FILES['img'];
$filearr = array();
foreach ($datafile['name'] as $key=>$value){
$type = pathinfo($value);
$filename = $path.time().mt_rand(0,999999999).'.'.$type['extension'];
if (move_uploaded_file($datafile['tmp_name'][$key],$filename)){
$filearr[] = $filename;
}
}
print_r(json_encode($filearr));die;
}
}

一个简单的ajax上传文件，欢迎广大朋友们一起来学习！

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

相关推荐

致自己美好生活的短句（生活的唯美句子致自己）

公众号的文章排版怎么更漂亮（搞定公众号排版的方法分享）

韩国相当于中国哪个省（韩国到底有多大面积）

蛋糕基础知识讲解（蛋糕基本知识大全）

孕期怎么进行音乐胎教呢（孕妈妈应该怎样进行音乐胎教训练）

开源的音乐播放器有哪些（盘点6个开源的音乐播放器）

发表评论