<!--上传照片-->
<section class="box-3">
<ul>
<li id="result_1"><input type="file" id="file_input_1" /></li>
<li id="result_2"><input type="file" id="file_input_2" /></li>
<li id="result_3"><input type="file" id="file_input_3" /></li>
</ul>
<h3>把您的美丽给大家分享一下吧~</h3>
</section><!--box-3-->
//上传图片
var input_1 = document.getElementById('file_input_1');
var input_2 = document.getElementById('file_input_2');
var input_3 = document.getElementById('file_input_3');
var result_1 = document.getElementById('result_1');
var result_2 = document.getElementById('result_2');
var result_3 = document.getElementById('result_3');
if(typeof FileReader === 'undefined'){
alert("抱歉,您的浏览器不支持FileReader");
}else{
input_1.addEventListener('change',function(event){
readFile(event,"1");
},false);
input_2.addEventListener('change',function(event){
readFile(event,"2");
},false);
input_3.addEventListener('change',function(event){
readFile(event,"3");
},false);
}
function readFile(event,obj){
var file = event.target.files[0];
if(!/image\/\w+/.test(file.type)){
alert("请选择正确的图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
$('#result_'+obj).css({background:"url("+this.result+") no-repeat center center",backgroundSize:"60px 60px"});
}
}
<section class="box-3">
<ul>
<li id="result_1"><input type="file" id="file_input_1" /></li>
<li id="result_2"><input type="file" id="file_input_2" /></li>
<li id="result_3"><input type="file" id="file_input_3" /></li>
</ul>
<h3>把您的美丽给大家分享一下吧~</h3>
</section><!--box-3-->
//上传图片
var input_1 = document.getElementById('file_input_1');
var input_2 = document.getElementById('file_input_2');
var input_3 = document.getElementById('file_input_3');
var result_1 = document.getElementById('result_1');
var result_2 = document.getElementById('result_2');
var result_3 = document.getElementById('result_3');
if(typeof FileReader === 'undefined'){
alert("抱歉,您的浏览器不支持FileReader");
}else{
input_1.addEventListener('change',function(event){
readFile(event,"1");
},false);
input_2.addEventListener('change',function(event){
readFile(event,"2");
},false);
input_3.addEventListener('change',function(event){
readFile(event,"3");
},false);
}
function readFile(event,obj){
var file = event.target.files[0];
if(!/image\/\w+/.test(file.type)){
alert("请选择正确的图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
$('#result_'+obj).css({background:"url("+this.result+") no-repeat center center",backgroundSize:"60px 60px"});
}
}