图片上传 & 预览

图片预览

DOM

<img id='previewImg'/>
<input id='selectImg' type='file'/>

js

function createObjectURL(file){
　　//兼容问题
　　if(window.URL){
　　　　return window.URL.createObjectURL(file)
　　}else if(window.webkitURL){
　　　　return window.webkitURL.createObjectURL(file)
　　}else{
　　　　return null
　　}
}
function readAsDataURL(file){
　　let fileReader = new FileReader()
　　fileReader.readAsDataURL(file)
　　fileReader.onload = e => {
　　　　return e.target.result
　　}
}
let previewImg = document.getElementById('previewImg'),selectImg = document.getElementById('selectImg');
selectImg.addEventListener('change',(e)=>{
　　//如果选择多张图片，实现图片预览，需循环e.target.files，然后new Image()动态生成img，循环设置img的src的值，最后append到body中。
　　let file = e.target.files[0]
　　// 第一种方式
　　previewImg.src = createObjectURL(file)
　　// 第二种方式
　　previewImg.src = readAsDataURL(file)
},false)

图片上传

DOM

<input id='selectImg' type='file'/>

js

function uploadImg(data){
　　let xhr = new XMLHttpRequest()
　　xhr.open('POST','/postImg')
　　xhr.onreadystatechange = () => {
　　　　console.log('postImg')
　　}
　　xhr.send(data)
}
let selectImg = document.getElementById('selectImg');
selectImg.addEventListener('change',e => {
    //file字段应和后端沟通，确保后端知道取字段的值。
　　let files = e.target.files,formData = new FormData();
　　formData.append('file',files)
　　uploadImg(formData)
},false)