html代码
<body>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<div class="wrap">
<button id="upload">点击上传文件</button>
<div>
<p id="before"></p>
<p id="process"></p>
<div id="fileWrap">
<p>上传文件列表</p>
</div>
</div>
</div>
<script type="text/javascript">
var button = document.getElementById('upload'),
before = document.getElementById("before"),
process = document.getElementById("process");
$(document).on('click', 'button', function(){
upload({
url: './upload.php',
maxSize: 2,
multiple: true,
beforeSend: function(file){
before.innerText = "开始上传...";
},
callback: function(data){
data = JSON.parse(data);
if(data && data.code == 200){
before.innerText = "上传成功!"
}else{
console.log(data.data);
}
var fileWrap = document.getElementById('fileWrap');
for(var i=0; i<data.data.length; i++){
var p = document.createElement('p');
var file = document.createElement('a');
file.href = '//practice.jumoshen.cn/ajax-file-upload//' + data.data[i].file_path;
file.target = "_blank"
file.innerText = "文件名：" + data.data[i].file_path;
p.appendChild(file);
fileWrap.appendChild(p);
}
},
uploading: function(pre){
process.innerText = "当前上传进度为：" + pre + "%";
}
});
})
</script>
</body>
|
js代码
function upload(option){
var formData = new FormData(),
xmlHttpRequest = new XMLHttpRequest()
input = document.createElement('input');
input.setAttribute('id', 'myUploadInput');
input.setAttribute('type', 'file');
input.setAttribute('name', 'file');
if(option.multiple){
input.setAttribute('multiple', true);
}
document.body.appendChild(input);
input.style.display = 'none';
input.click();
var fileType = ['doc','docx','xls','xlsx','pdf','jpg','png','ppt','pptx'];
input.onchange = function(){
if(!input.value){return;}
console.log(input.value)
var type = input.value.split('.').pop();
if(fileType.indexOf(type.toLocaleLowerCase()) == -1){
alert("暂不支持该类型的文件，请重新选择!");
return;
}
for(var i=0, file; file=input.files[i++];){
if(option.maxSize && file.size > option.maxSize * 1024 * 1024){
alert('请上传小于'+option.maxSize+'M的文件');
return;
}
}
if(option.beforeSend instanceof Function){
if(option.beforeSend(input) === false){
return false;
}
}
for(var i=0, file; file=input.files[i++];){
console.log(formData)
formData.append('file'+i, file);
}
xmlHttpRequest.open('post', option.url);
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.status == 200){
if(xmlHttpRequest.readyState == 4){
if(option.callback instanceof Function){
option.callback(xmlHttpRequest.responseText);
}
}
}else{
alert("上传失败！");
}
}
xmlHttpRequest.upload.onprogress = function(event){
var pre = Math.floor(100 * event.loaded / event.total);
if(option.uploading instanceof Function){
option.uploading(pre);
}
}
xmlHttpRequest.send(formData);
}
}
|
php代码
<?php
if(!empty($_FILES)){
$files = $_FILES;
$length = count($files);
$returnData = array();
$returnData['code'] = 200;
for ($i = 1; $i <= $length; $i++) {
$tmpName = 'file'.$i;
if (!empty($files[$tmpName])) {
$ext = next((explode('.', $files[$tmpName]['name'])));
$fileName = './images/'.time().rand().'.'.$ext;
if(move_uploaded_file($files[$tmpName]['tmp_name'], $fileName)){
$returnData['data'][$i-1]['message'] = '第'.$i.'张图片上传成功！';
$returnData['data'][$i-1]['file_path'] = $fileName;
}else{
$returnData['data'][$i-1]['message'] = '第'.$i.'张图片上传失败！';
$returnData['data'][$i-1]['file_path'] = null;
$returnData['code'] = 0;
}
}
}
}else{
header('location: http://www.jumoshen.cn');
}
echo json_encode($returnData);
|