您的位置：首页 > 编程语言 > PHP开发

基于Ajax+PHP的单文件、多文件异步上传实例

2018-03-09 13:39 316 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>基于Ajax+PHP的单文件、多文件异步上传实例</title>
<style>
#toUploaded span{
display: block;
}
</style>
</head>
<body>
<form id= "uploadForm">
<p >待上传文件名： <span id="toUploaded"></span>
<p >多文件上传文件： <input type="file" name="file" id="file1" multiple/></p>
<p >单文件上传文件： <input type="file" name="file" id="file2" /></p>
<p >单文件上传文件： <input type="file" name="file" id="file3" /></p>
<input type="button" value="上传" onclick="doUpload()" />
</form>

<script src="jquery-1.11.2.min.js"></script>
<script>
$(function(){
$('input[name="file"]').change(function(event) {
if($(this).attr('multiple') == 'multiple'){//多文件上传
var filePaths = $(this)[0].files;
$('.file_multiple').remove();//重选时，删掉原来已选的
for(var i = 0;i < filePaths.length; i++){
if(filePaths[i].name){
$('#toUploaded').append("<span class='file_multiple'>" + filePaths[i].name + "</span>");
}
}
}else{//单文件上传
var val = $(this).val();
if(val){
var id = $(this).attr('id');
$('.' + id).remove();//重选时，删掉原来已选的
$('#toUploaded').append("<span class='"+ id +"'>" + val.substr(val.lastIndexOf('\\')+1) + "</span>");
}
}
});
})
function doUpload() {
var formData = new FormData();
//知识拓展
//  jquery选择器 $(#id) 返回的是jquery对象，用document.getElementById( id )返回的是DOM对象。
// （1）jquery对象可以使用两种方式转换为DOM对象， [index]和.get(index)
//  $(#id)[0]   得到DOM对象
//  $(#id).get( 0 )   -----》  DOM对象
// （2）DOM对象转成jquery对象：
//  $(DOM对象）
var files = $("#file1")[0].files;//等价于document.getElementById("file1").files;
for(var i = 0; i < files.length; i++){
formData.append("fileupload[]",files[i]);   // 文件对象 ,fileupload必须加中括号
}
formData.append("fileupload[]", $('#file2')[0].files[0]);
formData.append("fileupload[]", $('#file3')[0].files[0]);
$.ajax({
url: 'upload.php' ,
type: 'post',
data: formData,
cache: false,
processData: false,
contentType: false,
async: false,
dataType: 'json',
success : function (data) {
if (data.code == 200) {
console.log(data.msg);
} else {
console.log(data.msg);
}
}
})
}
</script>
</body>
</html>

效果截图：

后端代码：<?php
$tmp_name = $_FILES['fileupload']['tmp_name'];
for($i = 0;$i < count($tmp_name);$i++){
$file = md5(uniqid().rand(1111,9999));
$name = $_FILES['fileupload']['name'];
list($f_name,$f_ext) = explode('.', $name[$i]);
if(is_uploaded_file($tmp_name[$i])){
$filename = './'.$file.'.'.$f_ext;
$return = move_uploaded_file($tmp_name[$i],$filename);
!$return && output('400',$name[$i].'上传失败！');
}else{
output('555','非法文件！');
}
}

$return ? output('200','上传成功！',['filename' => $filename]) : output('400','上传失败！');

function output($code,$msg,$datas = array()){
$outputData = array(
'code' => $code,
'msg' => $msg,
'datas' => $datas
);
exit(json_encode($outputData));
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航