1 - web實(shí)現(xiàn)圖片上傳并且預(yù)覽
這里利用了createObjectURL來獲取圖片的URL地址進(jìn)行預(yù)覽顯示
效果圖
image.png
全部代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input實(shí)現(xiàn)圖片上傳并且預(yù)覽</title>
</head>
<body>
<form action="" enctype="multipart/form-data">
<input type="file" id="file" name="uploadPic" class="uploadPic" onchange="handleUpload(this)">
<img src="" id="show" style="width: 200px; height: 200px; background-color: #eee">
</form>
<script type="text/javascript">
// ---------------- 使用createObjectURL獲取圖片url便且預(yù)覽顯示 ---------------
// 選擇圖片后觸發(fā)的方發(fā)
function handleUpload(obj) {
if (obj.value === '') {
return // 這里防止第二次選擇圖片時(shí)候點(diǎn)擊取消出現(xiàn)報(bào)錯(cuò)
}
console.log(obj) // 輸出了id="file"的dom對象
// var inputObj = document.getElementById('file') // dom獲取
var imgObject = obj.files[0]
console.log(imgObject) // 輸出了圖片的信息
// console.log(typeof imgObject) // 圖片是個(gè)對象類型
var showPicURL = getObjectURL(imgObject)
// 設(shè)置顯示預(yù)覽
var show = document.getElementById('show')
show.src = showPicURL
}
// 獲取圖片URL的兼容寫法
function getObjectURL(file) {
var url = null
if (window.createObjectURL != undefined) { // 基礎(chǔ)判斷
url = window.createObjectURL(file)
} else if (window.URL != undefined) { // 判斷 mozilla (firefox)
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) { // 判斷 webkit 和 chrome 瀏覽器
url = window.webkitURL.createObjectURL(file)
}
return url // 返回獲得的url
}
</script>
</body>
</html>
第一步：寫一個(gè)圖片上傳操作標(biāo)簽，一個(gè)圖片預(yù)覽的標(biāo)簽
html部分：
寫一個(gè)input type="file" 的標(biāo)簽，一個(gè)圖片預(yù)覽的img標(biāo)簽；在input中寫一個(gè)方發(fā)onchange="handleUpload(this)" 并且將當(dāng)前對象this傳入（這里的this是指input這個(gè)dom對象）
<form action="" enctype="multipart/form-data">
<input type="file" id="file" name="uploadPic" class="uploadPic" onchange="handleUpload(this)">
<img src="" id="show" style="width: 200px; height: 200px; background-color: #eee">
</form>
第二步：處理上傳了的圖片
javascript部分：
步驟：點(diǎn)擊上傳圖片 > 觸發(fā)了handleUpload方法并且得到input的對象 > 通過getObjectURL方法獲取到圖片的URL地址 > 最后在img標(biāo)簽上預(yù)覽顯示出來
<script type="text/javascript">
// ---------------- 使用createObjectURL獲取圖片url便且預(yù)覽顯示 ---------------
// 選擇圖片后觸發(fā)的方發(fā)
function handleUpload(obj) {
if (obj.value === '') {
return // 這里防止第二次選擇圖片時(shí)候點(diǎn)擊取消出現(xiàn)報(bào)錯(cuò)
}
console.log(obj) // 輸出了id="file"的dom對象
// var inputObj = document.getElementById('file') // dom獲取
var imgObject = obj.files[0]
console.log(imgObject) // 輸出了圖片的信息
// console.log(typeof imgObject) // 圖片是個(gè)對象類型
var showPicURL = getObjectURL(imgObject)
// 設(shè)置顯示預(yù)覽
var show = document.getElementById('show')
show.src = showPicURL
}
// 獲取圖片URL的兼容寫法
function getObjectURL(file) {
var url = null
if (window.createObjectURL != undefined) { // 基礎(chǔ)判斷
url = window.createObjectURL(file)
} else if (window.URL != undefined) { // 判斷 mozilla (firefox)
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) { // 判斷 webkit 和 chrome 瀏覽器
url = window.webkitURL.createObjectURL(file)
}
return url // 返回獲得的url
}
</script>
