<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<link href='' rel='stylesheet' type='text/css' /><style type='text/css'>
</style>
</head>
<body class='typora-export' >
<div>
单文件上传:
<input type="file" value="" id="file" accept="image/*">
<!-- 本地预览 -->
<img alt="暂无图片" id="myImg" style="width:200px">
<button id="upload">上传</button>
</div>
<div class="lists">
</div>
</body>
<script>
var input = document.querySelector('#file') //上传的文件
var upload = document.querySelector('#upload') //上传的按钮
var myImg = document.querySelector('#myImg') //图片
// 上传
upload.onclick= function(){
// 浏览器是否支持 html5
var files = input.files ? input.files :[]
console.log(files)
if(!files.length || !window.FileReader){
console.log('浏览器不支持')
return false;
}
//ajax
var fd = new FormData() //通过formdata将文件转成二进制数据流
fd.append('file',files[0])
var request = new XMLHttpRequest();
request.open('post','http://xxxx/upload/single')
request.send(fd);
request.onreadystatechange = function(){
if(request.readyState == 4 & request.status==200){
alert('上传成功')
}
}
}
input.onchange = function(e){
// 浏览器是否支持 html5
var files = input.files ? input.files :[]
console.log(files)
if(!files.length || !window.FileReader){
console.log('浏览器不支持')
return false;
}
//单个 获取文件对象
// console.log(e.target)
// var file = e.target.files[0]
// var reader = new FileReader() //是一种异步文件读取
// reader.readAsDataURL(file) //转成base64
// reader.onload = function(event){
// console.log(event)
// myImg.src = event.target.result;
// }
// 多个
for(var i = 0 ; i < e.target.files.length ; i++){
var img = document.createElement('img')
img.width=1000;
var file = e.target.files[i] //当前文件
console.log(file)
if(!(/^image\/.*$/i.test(file.type))){
continue; //不是图片 就跳出这次循环
}
var thisSrc = URL.createObjectURL(file)
img.setAttribute('src' , thisSrc)
img.onload = function(){
imgs.append(this)
URL.revokeObjectURL(thisSrc)
}
}
}
</script>
</html>
网友评论