web前端实现上传土图片并且预览效果
2018-08-10 本文已影响105人
何鸿biu
1 - web实现图片上传并且预览
这里利用了createObjectURL来获取图片的URL地址进行预览显示
效果图
image.png
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input实现图片上传并且预览</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便且预览显示 ---------------
// 选择图片后触发的方发
function handleUpload(obj) {
if (obj.value === '') {
return // 这里防止第二次选择图片时候点击取消出现报错
}
console.log(obj) // 输出了id="file"的dom对象
// var inputObj = document.getElementById('file') // dom获取
var imgObject = obj.files[0]
console.log(imgObject) // 输出了图片的信息
// console.log(typeof imgObject) // 图片是个对象类型
var showPicURL = getObjectURL(imgObject)
// 设置显示预览
var show = document.getElementById('show')
show.src = showPicURL
}
// 获取图片URL的兼容写法
function getObjectURL(file) {
var url = null
if (window.createObjectURL != undefined) { // 基础判断
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>
第一步：写一个图片上传操作标签，一个图片预览的标签
html部分：
写一个input type="file" 的标签，一个图片预览的img标签；在input中写一个方发onchange="handleUpload(this)" 并且将当前对象this传入（这里的this是指input这个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部分：
步骤：点击上传图片 > 触发了handleUpload方法并且得到input的对象 > 通过getObjectURL方法获取到图片的URL地址 > 最后在img标签上预览显示出来
<script type="text/javascript">
// ---------------- 使用createObjectURL获取图片url便且预览显示 ---------------
// 选择图片后触发的方发
function handleUpload(obj) {
if (obj.value === '') {
return // 这里防止第二次选择图片时候点击取消出现报错
}
console.log(obj) // 输出了id="file"的dom对象
// var inputObj = document.getElementById('file') // dom获取
var imgObject = obj.files[0]
console.log(imgObject) // 输出了图片的信息
// console.log(typeof imgObject) // 图片是个对象类型
var showPicURL = getObjectURL(imgObject)
// 设置显示预览
var show = document.getElementById('show')
show.src = showPicURL
}
// 获取图片URL的兼容写法
function getObjectURL(file) {
var url = null
if (window.createObjectURL != undefined) { // 基础判断
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>
