在上传图片的时候，希望在浏览器上能预览图片。
之前的做法是 ajax 方式上传图片，返回服务器的图片访问地址，本地预览。
在想有没有办法，不上传直接预览。之前记得是因为安全性原因，不能预览。但是着找到了这么个示例，贴出来大家看看。兼容性没去校验。
效果演示：http://demo.dreamlu.net/image-upload-view.html
<html> <head> <meta charset="UTF-8"> <title>如梦技术IT-图片上传预览</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp"> </head> <body> <input type="file" id="user-pic"> <img id="viewImg"> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> //图片预览，兼容各个浏览器 function previewImage(file) { var porImg = $(file), viewImg = $('#viewImg'); var image = porImg.val(); if (!/^\S*\.(?:png|jpe?g|bmp|gif)$/i.test(image)) { layer.msg('请选择图片~', {shift: 6}); porImg.val(""); return false; } if (file["files"] && file["files"][0]) { var reader = new FileReader(); reader.onload = function(evt){ viewImg.attr({src : evt.target.result}); } reader.readAsDataURL(file.files[0]); } else { var ieImageDom = document.createElement("div"); var proIeImageDom = document.createElement("div"); $(ieImageDom).css({ float: 'left', position: 'relative', overflow: 'hidden', width: '100px', height: '100px' }).attr({"id":"view"}); $(proIeImageDom).attr({"id": porImg.attr("id")}); porImg.parent().prepend(proIeImageDom); porImg.remove(); file.select(); path = document.selection.createRange().text; $(ieImageDom).css({"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"}); } } //图片上传预览 $('#user-pic').change(function(e){ previewImage(this); }); </script> </body> </html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于