圖片本地上傳預覽
阿新 • • 發佈:2017-05-17
dao tom favicon 查看 else ada author chang dataurl
在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; width: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>
圖片本地上傳預覽