ajax 异步多图上传
后台
<?php
header('Access-Control-Allow-Origin:*');
$file = $_FILES['file']; //得到传输的数据,以数组的形式
$name = $file['name']; //得到文件名称，以数组的形式
$upload_path = "uploadimg/"; //上传文件的存放路径
//当前位置
foreach ($name as $k=>$names){
$type = strtolower(substr($names,strrpos($names,'.')+1));//得到文件类型，并且都转化成小写
$allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型
//把非法格式的图片去除
if (!in_array($type,$allow_type)){
unset($name[$k]);
}
}
$str = '';
foreach ($name as $k=>$item){
$type = strtolower(substr($item,strrpos($item,'.')+1));//得到文件类型，并且都转化成小写
if (move_uploaded_file($file['tmp_name'][$k],$upload_path.time().$name[$k])){
$str .= ','.$upload_path.time().$name[$k];
echo 'success';
}else{
echo 'failed';
}
}
echo $str;
前端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax+PHP实现异步图片上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
#feedback{
height: 200px;
text-align: center;
height: 160px;
border: 1px solid silver;
border-radius: 3px;
}
#feedback img{
margin:3px 10px;
border: 1px solid silver;
border-radius:3px;
padding: 6px;
width: 35%;
height: 85%;
}
#feedback p{
font-family: "微软雅黑";
line-height: 120px;
color: #ccc;
}
.file {
position: relative;
display: inline-block;
border: 1px solid #1ab294;
border-radius: 4px;
padding: 8px 16px;
overflow: hidden;
color: #fff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
color: #1ab294;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.box{
margin-top: 10px;
text-align: center;
}
.box a{
margin-left: 10px;
}
</style>
</head>
<body>
<button type="button" data-toggle="tooltip" id="button-upload" class="btn btn-primary"><i class="fa fa-upload">666</i></button>
<script>
$('#button-upload').on('click', function() {
$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file[]" value="" multiple="multiple" /></form>');
$('#form-upload input[name=\'file[]\']').trigger('click');
if (typeof timer != 'undefined') {
clearInterval(timer);
}
timer = setInterval(function() {
if ($('#form-upload input[name=\'file[]\']').val() != '') {
clearInterval(timer);
var df = new FormData($('#form-upload')[0]);
console.log(df);
$.ajax({
url: 'a.php',
type: 'post',
dataType: 'json',
data: df,
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
// $('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
// $('#button-upload').prop('disabled', true);
},
complete: function() {
// $('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
// $('#button-upload').prop('disabled', false);
},
success: function(json) {
// if (json['error']) {
// alert(json['error']);
// }
// if (json['success']) {
// alert(json['success']);
// $('#button-refresh').trigger('click');
// }
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
}
}, 500);
});
</script>
</body>
</html>
