需求:单独上传图片和多图上传
实现一:使用原生ajax来完成
1、html代码界面提交按钮
<input type="file" name="pic[]" multiple id="myinput">
<button onclick="uploadFile()">上传</button>
2、js代码
<script>
function uploadFile(){
var files=document.getElementById("myinput").files;
console.log(files)
// [].forEach.call(document.getElementById("myinput").files, function(itemFile){
// //读取文件
// readImage(itemFile);
// // console.log(e.dataTransfer.files)
// // console.log(itemFile)
// })
for(var i=0;i<files.length;i++){
readImage(files[i])
}
function readImage(obj){
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("pic", obj);
// fd.append("username", "xiaopingping");
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
xhr.open("POST", "upload.php");
xhr.send(fd);
}
}
</script>
实现二:使用juery来实现
<script>
//这里是单张上传
function uploadFile(){
var fd = new FormData();
fd.append("pic", document.getElementById("myinput").files[0]);
$.ajax({
url:"upload.php",
type:"post",
data:fd,
processData:false,
contentType:false,
success:function(res){
console.log("来啦");
console.log(res);
},
dataType:"json"
})
}
//多张上传
function uploadFiles(){
var fd = new FormData();
var imageFiles = document.getElementById("myinput").files;
for(var i = 0; i <imageFiles.length;i ++ ){
fd.append("pic"+i, imageFiles[i]);
}
$.ajax({
url:"upload.php",
type:"post",
data:fd,
processData:false,
contentType:false,
success:function(res){
console.log("来啦");
console.log(res);
},
dataType:"json"
})
}
</script>