在IE里面显示的话,你可以用div直接显示图片,不通过img来添加SRC,这样就不会有小图标出现
例子:
<div class="banner_up_pic" id="imgPreDiv"></div>
var file_upl = document.getElementById("file");
file_upl.select();
获取图片路径 var imgpath=document.selection.createRange().text;
注意imgPreDiv 为图片显示的div的ID !!! document.getElementById("imgPreDiv").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=""+ imgpath + "")";//使用滤镜效果
我写了一个兼容版本
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <meta name="description" content="图片本地上传预览"> <meta name="author" content="jiangxiaobo"> <link rel="icon" href="favicon.ico"> <title>图片本地上传预览</title> <!-- <link rel="stylesheet" type="text/css" href="css/*.css"> --> <style type="text/css"> .preview { position: relative; 260px; height:190px; border:1px solid #000; overflow:hidden; } .preview .imghead { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-size: 100%; } .preview .input-file { position: absolute; left: -1000px; top: -1000px; } </style> </head> <body> <div class="preview"> <label class="imghead"> <input class="input-file" type="file" accept="image/*" onchange="previewImage(this)" /> </label> </div> <script type="text/javascript" src="./Public/web/js/jquery.1.8.3.min.js"></script> <script type="text/javascript"> function previewImage(file){ // console.log(file.files); var imghead = $(file).parent('.imghead'); var preview = imghead.parent('.preview'); var imgheadOffset = imghead.offset(); var rect = { top : imgheadOffset.top, left : imgheadOffset.left, width : imghead.width(), height : imghead.height() }; if(file.files && file.files[0]){ // 主流浏览器 var reader = new FileReader(); reader.onload = function(evt){ imghead.css('background-image','url('+evt.target.result+')'); }; reader.readAsDataURL(file.files[0]); }else{ //兼容IE file.select(); var src = document.selection.createRange().text; preview.css('filter','progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'+src+'")'); } } </script> </body> </html>