js实现移动端漂亮input框上传本地，图片显示缩略图，点击可以查看大图，再点击恢复

来源：互联网发布：c语言截断编辑：程序博客网时间：2024/05/21 02:37

<body>

<div style="margin-left: 5%;"><a href="javascript:;" class="upload" >
   <input type="file" name="files" id="upload1" accept="image/*;capture=camcorder" style="display:none;" />
   <img src="覆盖input框的图片" onclick="clickInput(this);"/>
</a>
<span id="upload1Span"><span id="upload1Font">请选择图片</span>
<img id="upload1Img" onclick="picBig(this);" width="-1" height="-1" style="diplay:none" />
<span id="upload1Del" onclick="delect(this)" style="display: none;">删除</span>
</span>
</div>

<div id="divCenter" onclick="picClose();" align="center" style=" position: absolute;
z-index: 9;display:none; background-color: #808080; width:100%; height:100%;left:0px;top:0px;">
<img id="largeImg" />
</div>

</body>

//首先根据id得到input框的文件，判断大小，如果大于100M就不给上传，如果不大于就可以上传

$("input[type='file']").on("change",function(){
var load = $(this).attr("id");
var fileSize = $(this).get(0).files[0].size;
if(fileSize > 104857600 ){
alert("图片不大于100MB。");
return;
}
else{
var docObj=document.getElementById(load);
var imgObjPreview=document.getElementById(load+"Img");
var del = document.getElementById(load+"Del");
document.getElementById(load+"Font").style.display = 'none' ;
del.style.display = 'inline';
if(docObj.files && docObj.files[0]){
imgObjPreview.style.display = 'inline';
imgObjPreview.style.width = '50px';
imgObjPreview.style.height = '50px';
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
return true;
}
})

function clickInput(ele){
$(ele).prev().click();
}

function picBig(ele) {
var load=ele.id.replace("Img",""); //得到上传图片的id
var docObj=document.getElementById(load); //根据id得到上传图片
var imgObjPreview=document.getElementById("largeImg"); //得到大图
if(docObj.files && docObj.files[0]){
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); //将上传图片的src赋给大图的src
var big = document.getElementById('divCenter'); //得到大图所在的div
bid.style.display = "block"; //改变大图所在div的样式
}
}

function delect(ele){
$(ele).prev().get(0).style.display = 'none';
ele.style.display = 'none' ;
var inputId = ele.id.replace("Del","");
document.getElementById(inputId).value = '';
var fontId = ele.id.replace("Del","Font");
document.getElementById(fontId).style.display = "inline";
}


function picBig(ele) {
var imgObjPreview=document.getElementById("largeImg");
imgObjPreview.src=ele.src;
var big = document.getElementById('divCenter');
big.style.display = "block";
}

function picClose() {
var big = document.getElementById('divCenter');
big.style.display = "none";
}

</script>

阅读全文

0 0