在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。
常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图片，用户确认提交后再上传至服务器保存。
这两种方法各有利弊，方法一很明显，浪费流量和服务器资源；方法二则加重了浏览器的负担，并且对浏览器的兼容性要求更高（在某些低版本中的IE浏览器不支持）。
eg1：window.FileReader本地预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片上传预览演示</title>
<style>
.img-padd{margin-top:10px;padding-bottom:10px;border:1px #e3e3e3 solid}
.img-padd h1{font-size:32px;text-align:center;color:#3a3a3a;margin:30px 30px}
.img-box{position:relative;margin:0 auto;width:300px;height:300px;border:1px #e3e3e3 solid;display:table;border-radius:6px}
.img-box h1{text-align:center}
.img-box .img-box-div{display:table-cell;vertical-align:middle}
.img-box .img-box-div img{width:100%}
.img-box .input-file{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0}
</style>
</head>
<body>
<div class="img-padd">
<h1> window.FileReader本地预览</h1>
<div class="img-box">
<input type="file" class="input-file img-btn">
<div class="img-box-div img-container" >
<img src="images/upload.png" alt="">
</div>
</div>
</div>
<script>
//上传图片并预览
function previewImg(fileInput, imgDiv) {
if (window.FileReader) {//支持FileReader的时候
var reader = new FileReader();
reader.readAsDataURL(fileInput.files[0]);
reader.onload = function (evt) {
imgDiv.innerHTML = "\<img src=" + evt.target.result + "\>";
}
} else {//兼容ie9-
imgDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + fileInput.value + '\)\';"></div>';
}
}
function selectImg(fileInputs, imgDivs) {
var checkImg = new RegExp("(.jpg$)|(.png$)|(.bmp$)|(.jpeg$)", "i");
var i = 0;
for (; i < fileInputs.length && i < imgDivs.length; i++) {
(function (i) {//立即执行函数；保存i
fileInputs[i].onchange = function () {
if (checkImg.test(fileInputs[i].value)) {
previewImg(this, imgDivs[i]);
} else {
alert("只支持上传.jpg .png .bmp .jpeg;你的选择有误");
}
};
})(i);
}
}
/* 为IE6 IE7 IE8增加document.getElementsByClassName函数 */
/MSIE\s*(\d+)/i.test(navigator.userAgent);
var isIE = parseInt(RegExp.$1 ? RegExp.$1 : 0);
if (isIE > 0 && isIE < 9) {
document.getElementsByClassName = function (cls) {
var els = this.getElementsByTagName('*');
var ell = els.length;
var elements = [];
for (var n = 0; n < ell; n++) {
var oCls = els[n].className || '';
if (oCls.indexOf(cls) < 0) continue;
oCls = oCls.split(/\s+/);
var oCll = oCls.length;
for (var j = 0; j < oCll; j++) {
if (cls == oCls[j]) {
elements.push(els[n]);
break;
}
}
}
return elements;
}
}
var fileInputs = document.getElementsByClassName("img-btn");//文件选择按钮
var imgDivs = document.getElementsByClassName("img-container");//图片容器
selectImg(fileInputs, imgDivs);
</script>
</body>
</html>
eg2：window.URL.createObjectURL本地预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片上传预览演示</title>
<style>
.img-padd{margin-top:10px;padding-bottom:10px;border:1px #e3e3e3 solid}
.img-padd h1{font-size:32px;text-align:center;color:#3a3a3a;margin:30px 30px}
.img-box{position:relative;margin:0 auto;width:300px;height:300px;border:1px #e3e3e3 solid;display:table;border-radius:6px}
.img-box h1{text-align:center}
.img-box .img-box-div{display:table-cell;vertical-align:middle}
.img-box .img-box-div img{width:100%}
.img-box .input-file{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0}
</style>
</head>
<body>
<div class="img-padd">
<h1> window.URL.createObjectURL本地预览</h1>
<div class="img-box">
<input type="file" class="input-file img-btn">
<div class="img-box-div img-container">
<img src="images/upload.png" alt="">
</div>
</div>
</div>
<script>
//上传图片并预览
function previewImg(fileInput, imgDiv) {
//原书这里是event.files，经过测试，修正为this.files
url = window.URL.createObjectURL(fileInput.files[0]) //创建URL对象
if (url) {
imgDiv.innerHTML = '<img src="' + url + '">';
} else {
imgShow.innerHTML = 'your browser doesnt support obj urls!'
}
}
function selectImg(fileInputs, imgDivs) {
var checkImg = new RegExp("(.jpg$)|(.png$)|(.bmp$)|(.jpeg$)", "i");
var i = 0;
for (; i < fileInputs.length && i < imgDivs.length; i++) {
(function (i) {//立即执行函数；保存i
fileInputs[i].onchange = function () {
if (checkImg.test(fileInputs[i].value)) {
previewImg(this, imgDivs[i]);
} else {
alert("只支持上传.jpg .png .bmp .jpeg;你的选择有误");
}
};
})(i);
}
}
/* 为IE6 IE7 IE8增加document.getElementsByClassName函数 */
/MSIE\s*(\d+)/i.test(navigator.userAgent);
var isIE = parseInt(RegExp.$1 ? RegExp.$1 : 0);
if (isIE > 0 && isIE < 9) {
document.getElementsByClassName = function (cls) {
var els = this.getElementsByTagName('*');
var ell = els.length;
var elements = [];
for (var n = 0; n < ell; n++) {
var oCls = els[n].className || '';
if (oCls.indexOf(cls) < 0) continue;
oCls = oCls.split(/\s+/);
var oCll = oCls.length;
for (var j = 0; j < oCll; j++) {
if (cls == oCls[j]) {
elements.push(els[n]);
break;
}
}
}
return elements;
}
}
var fileInputs = document.getElementsByClassName("img-btn");//文件选择按钮
var imgDivs = document.getElementsByClassName("img-container");//图片容器
selectImg(fileInputs, imgDivs);
</script>
</body>
</html>
eg3：Ajax上传至后台并返回图片的url
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片上传预览演示-柯乐义</title>
<style>
.img-padd{margin-top:10px;padding-bottom:10px;border:1px #e3e3e3 solid}
.img-padd h1{font-size:32px;text-align:center;color:#3a3a3a;margin:30px 30px}
.img-box{position:relative;margin:0 auto;width:300px;height:300px;border:1px #e3e3e3 solid;display:table;border-radius:6px}
.img-box h1{text-align:center}
.img-box .img-box-div{display:table-cell;vertical-align:middle}
.img-box .img-box-div img{width:100%}
.img-box .input-file{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0}
</style>
</head>
<body>
<div class="img-padd">
<h1> window.URL.createObjectURL本地预览</h1>
<div class="img-box">
<input type="file" class="input-file img-btn" id="avatar">
<div class="img-box-div img-container">
<img src="images/upload.png" alt="">
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script>
//上传图片并预览
function selectImg(fileInputs, imgDivs) {
var checkImg = new RegExp("(.jpg$)|(.png$)|(.bmp$)|(.jpeg$)", "i");
var i = 0;
for (; i < fileInputs.length && i < imgDivs.length; i++) {
(function (i) {//立即执行函数；保存i
fileInputs[i].onchange = function () {
if (checkImg.test(fileInputs[i].value)) {
var formData={'avatar':$("#avatar")[0].files[0]};
console.log(formData);
$.ajax({
url: '/upload_avatar/',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (res) {
console.log(res); /*服务器端的图片地址*/
imgDiv.innerHTML = '<img src="' + res + '">';/*预览图片*/
$("#avatar").val('/'+res); /*将服务端的图片url赋值给form表单的隐藏input标签*/
}
})
} else {
alert("只支持上传.jpg .png .bmp .jpeg;你的选择有误");
}
};
})(i);
}
}
/* 为IE6 IE7 IE8增加document.getElementsByClassName函数 */
/MSIE\s*(\d+)/i.test(navigator.userAgent);
var isIE = parseInt(RegExp.$1 ? RegExp.$1 : 0);
if (isIE > 0 && isIE < 9) {
document.getElementsByClassName = function (cls) {
var els = this.getElementsByTagName('*');
var ell = els.length;
var elements = [];
for (var n = 0; n < ell; n++) {
var oCls = els[n].className || '';
if (oCls.indexOf(cls) < 0) continue;
oCls = oCls.split(/\s+/);
var oCll = oCls.length;
for (var j = 0; j < oCll; j++) {
if (cls == oCls[j]) {
elements.push(els[n]);
break;
}
}
}
return elements;
}
}
var fileInputs = document.getElementsByClassName("img-btn");//文件选择按钮
var imgDivs = document.getElementsByClassName("img-container");//图片容器
selectImg(fileInputs, imgDivs);
</script>
</body>
</html>
eg4：vue框架
<html lang="en" style="font-size: 42.6667px;">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover;">
<title>个人信息</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/mine.css">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/green.css">
<link rel="stylesheet" href="css/branch.css">
<link rel="stylesheet" href="css/order.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/mine.css">
<style>
.img-padd {
margin-top: 1rem;
padding-bottom: 1rem;
border: 1px #e3e3e3 solid;
}
.img-padd h1 {
font-size: .32rem;
font-size: .36rem;
text-align: center;
color: #3a3a3a;
margin: .2rem .3rem;
}
.img-box {
position: relative;
margin: 0 auto;
width: 3rem;
height: 3rem;
border: 1px #e3e3e3 solid;
display: table;
border-radius: 6px
}
.img-box h1 {
text-align: center;
}
.img-box .img-box-div {
display: table-cell;
vertical-align: middle
}
.img-box .img-box-div img {
width: 100%
}
.img-box .input-file {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0
}
</style>
<script>
</script>
</head>
<body>
<div id="barba-wrapper" class="hp100">
<div class="barba-container hp100">
<div class="common-head bg1 tc">
<h3>上传图片</h3>
</div>
<div class="hp100 bgf8 common-content" id="uploadimages">
<div class="img-padd">
<h1> Ajax上传至后台并返回图片的url</h1>
<div class="img-box">
<input type="file" class="input-file" id="fileinput" v-on:change="bindAvatar1">
<div class="img-box-div">
<img src="images/upload.png" id="imgsrc" alt="">
</div>
</div>
</div>
<div class="img-padd">
<h1> window.FileReader本地预览</h1>
<div class="img-box">
<input type="file" class="input-file" v-on:change="selectImg(event)">
<div class="img-box-div">
<img src="images/upload.png" id="imgsrc2" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/require.min.js" data-main="js/common"></script>
<script>
require(['jquery', 'vue'], function ($, Vue) {
var uploadImages = new Vue({
el: '#uploadimages',
data: {
},
mounted: function () {
},
methods: {
bindAvatar1: function () {
var formData = {'avatar': $("#fileinput")[0].files[0]};
console.log(formData);
$.ajax({
url: '/upload_avatar/',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (res) {
console.log(res);
/*服务器端的图片地址*/
$("#imgsrc").src(res);
/*将服务端的图片url赋值给form表单的隐藏input标签*/
}
})
},
selectImg: function (event) {
var fileInput = event.target.files[0];
console.log(fileInput);
var checkImg = new RegExp("(.jpg$)|(.png$)|(.bmp$)|(.jpeg$)", "i");
if (checkImg.test(fileInput.name)) {
this.previewImg(fileInput);
} else {
alert("只支持上传.jpg .png .bmp .jpeg;你的选择有误");
}
},
previewImg: function (fileInput) {
var test = '';
if (window.FileReader) {//支持FileReader的时候
var reader = new FileReader();
reader.readAsDataURL(fileInput);
reader.onload = function (evt) {
$('#imgsrc2').attr('src',evt.target.result);
}
}
}
}
})
;
});
</script>
</body>
</html>
2067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
