简易图片点击上传预览示例。chrome,火狐等浏览器 下可支持拖拽预览
<!doctype> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript"> //--从 file 域获取 本地图片 url function getfileurl(sourceid) { var url; if (navigator.useragent.indexof("msie")>=1) { // ie url = document.getelementbyid(sourceid).value; } else if(navigator.useragent.indexof("firefox")>0) { // firefox url = window.url.createobjecturl(document.getelementbyid(sourceid).files.item(0)); } else if(navigator.useragent.indexof("chrome")>0) { // chrome url = window.url.createobjecturl(document.getelementbyid(sourceid).files.item(0)); } return url; } var ss=null var imgtype=["gif", "jpeg", "jpg", "bmp", "png","ico"]; //--将本地图片 显示到浏览器上 function preimg(obj, targetid) { ss=obj; if (!regexp("\.(" + imgtype.join("|") + ")$", "i").test(obj.value.tolowercase())) { alert("选择文件错误,图片类型必须是" + imgtype.join(",")); this.value = ""; return false } var sourceid=obj.id var url = getfileurl(sourceid); var imgpre = document.getelementbyid(targetid); imgpre.src = url; } </script> </head> <body> <form action=""> <label style="position: relative;width:100px;height:100px;display: block;line-height:100px; " align="center"> <input type="file" accept="image/*" name="imgone" id="imgone" onchange="if(this.value){preimg(this, 'imgpre');}" style="height: 100%;width: 100%;position: absolute;z-index: 9;left: 0;right: 0;opacity: 0;"/> <img id="imgpre" src="" style="display: block;position: absolute;width:100%;height:100%;border: 1px solid #999;"/> 上传图片 </label> </form> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
angularjs的ng-bind-html指令详解
前后端为什么要分开写
以上就是 简易的图片点击上传功能的详细内容。