微客导航 » 文章资讯 » JS实现可视化文件上传

JS实现可视化文件上传

2023-09-08 08:14:04 256

本文实例为大家分享了JS可视化文件上传的具体代码，供大家参考，具体内容如下

测试-Style


.imgbox,.imgbox1
{
position:relative;
width:200px;
height:180px;
border:1pxsolid#ddd;
overflow:hidden;
}

.imgnum{
left:0px;
top:0px;
margin:0px;
padding:0px;
}
.imgnuminput,.imgnum1input{
position:absolute;
width:200px;
height:180px;
opacity:0;
}
.imgnumimg,.imgnum1img{
width:100%;
height:100%;
}
.close,
.close1{
color:red;
position:absolute;
right:10px;
top:0;
display:none;
}

测试--HTML

JS:需要引入jquery


$(function(){
$(".filepath").on("change",function(){
varsrcs=getObjectURL(this.files[0]);//获取路径
$(this).nextAll(".img1").hide();//this指的是input
$(this).nextAll(".img2").show();//fireBUg查看第二次换图片不起做用
$(this).nextAll('.close').show();//this指的是input
$(this).nextAll(".img2").attr("src",srcs);//this指的是input
$(this).val('');//必须制空
$(".close").on("click",function(){
$(this).hide();//this指的是span
$(this).nextAll(".img2").hide();
$(this).nextAll(".img1").show();
})
})
})



//关键代码：getObjectURLreturnurl
functiongetObjectURL(file){
varurl=null;
if(window.createObjectURL!=undefined){
url=window.createObjectURL(file)
}elseif(window.URL!=undefined){
url=window.URL.createObjectURL(file)
}elseif(window.webkitURL!=undefined){
url=window.webkitURL.createObjectURL(file)
}
returnurl
};


//modifyimg
$(function(){
$("#img").on("change",".filepath1",function(){
//alert($('.imgbox1').length);
varsrcs=getObjectURL(this.files[0]);//获取路径
alert(srcs);
//this指的是input
/*$(this).nextAll(".img22").attr("src",srcs);//this指的是input
$(this).nextAll(".img22").show();//fireBUg查看第二次换图片不起做用*/
varhtmlImg=''+
''+
''+
'X'+
''+
''+
'

'+ '

'; $(this).parent().parent().before(htmlImg); $(this).val('');//必须制空 $(this).parent().parent().prev().find(".img11").hide();//this指的是input $(this).parent().parent().prev().find('.close1').show(); $(".close1").on("click",function(){ $(this).hide();//this指的是span $(this).nextAll(".img22").hide(); $(this).nextAll(".img11").show(); if($('.imgbox1').length>1){ $(this).parent().parent().remove(); } }) }) })

注：低版本IE不支持可视化

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JS实现可视化文件上传

热门推荐

随机推荐