前端

javascript实现input file上传图片预览效果_javascript技巧_脚本之家

10 3月 , 2020  

    .imgbox,.imgbox1 { float: left; margin-right: 20px; margin-top: 20px; position: relative; width: 182px; height: 142px; border: 1px solid red; overflow: hidden; } .imgbox1{border: 1px solid blue; } .imgnum{ left: 0px; top: 0px; margin: 0px; padding: 0px; } .imgnum input,.imgnum1 input { position: absolute; width: 182px; height: 142px; opacity: 0; } .imgnum img,.imgnum1 img { width: 100%; height: 100%; } .close, .close1 { color: red; position: absolute; left: 170px; top: 0px; display: none; }    X      X      X      X      X      X      X      X       X      X    $ { $.on { alert; var srcs = getObjectURL; //获取路径 $.nextAll; //this指的是input $.nextAll; //fireBUg查看第二次换图片不起做用 $.nextAll; //this指的是input $.nextAll.attr; //this指的是input $; //必须制空 $.on { $; //this指的是span $.nextAll; $.nextAll }) }) function getObjectURL { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL } else if (window.URL != undefined) { url = window.URL.createObjectURL } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL } return url }; $ { $.on("change",".filepath1",function() { //alert; var srcs = getObjectURL; //获取路径 alert; //this指的是input /* $.nextAll.attr; //this指的是input $.nextAll; //fireBUg查看第二次换图片不起做用*/ var htmlImg='<div >'+ '<div >'+ '<input type="file" />'+ '<span >X</span>'+ '<img src="https://www.jb51.net/article/btn.png" />'+ '<img src="'+srcs+'" />'+ '</div>'+ '</div>'; $.parent; $; //必须制空 $.parent.find; //this指的是input $.parent.find; $.on { $; //this指的是span $.nextAll; $.nextAll; if.length>1){ $.parent })

希望本文所述对大家学习javascript程序设计有所帮助。

本文实例介绍了javascript实现input
file上传图片预览效果的详细代码,分享给大家供大家参考,具体内容如下


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图