web 圖片上傳實現本地預覽
阿新 • • 發佈：2018-06-06
UNC view 使用 區別 lec F5 sed 邊界 urn
在說上傳之前先說說如何替換or美化瀏覽器自帶的簡陋上傳按鈕（自定義自己的上傳按鈕 如:img）:
1.將自定義上傳按鈕上方添加 input file 框，實現input實現透明處理。
2.對自定義上傳按鈕添加事件。隱藏真正input框。用事件來觸發：
function imgBtn(){
return document.getElementById("inputid").click();
}
現在瀏覽器基本都支持H5 。針對H5的代碼：
var docObj=document.getElementById("inputid");var imgObjPreview=document.getElementById("imgId"); imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
針對ie的代碼：
docObj.select(); docObj.blur(); var localImagId = document.getElementById("divid or imgid"); var imgSrc = docObj.createTextRange().text; try{ localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch(e) { console.log(e); alert("您上傳的圖片格式不正確，請重新選擇!"); return false; }
很多大型網站上都使用到了這個濾鏡，它是IE濾鏡的一種，其主要作用就是對圖片進行透明處理。雖然FireFox和IE7以上的IE瀏覽器已經支持透明的PNG圖片，但是就IE5-IE6而言還是有一定的意義。語法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
屬性：
enabled : 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false （這個基本可以忽略，被禁止了那還搞什麽……）
true : 默認值。濾鏡激活。
false : 濾鏡被禁止。
sizingMethod : 可選項。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。（可以無視這行說明，關鍵是下面的參數。一般來說單獨圖片且精度比較高的使用scale比較合適，除非您把所有的要用到的圖片都放到一張圖那就當我沒說過。但是那樣做的話這張png圖片的體積估計不會很小。另，這個濾鏡只是加載，其填充方式還是可以受CSS控制的。）
crop : 剪切圖片以適應對象尺寸。
image : 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。
scale : 縮放圖片以適應對象的尺寸邊界。
src : 必選項。字符串(String)。（指定圖片的路徑。要註意的是這個路徑是指加載濾鏡的頁面相對於圖片的路徑而不是css文件相對於圖片的路徑。這跟一般的圖片加載有區別。）
使用實例：
.login_logo { background-image: url(../Image/login_logo.png); _background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=‘/Public/Image/login_logo.png‘); }
參考: https://www.cnblogs.com/hzxy-blog/p/6410204.html
上面怎麽點擊瀏覽按鈕後,圖片顯示在網頁中了,這個用到了, 瀏覽按鈕的各個事件 可以參考下...
<body> <input type="file" id="input"> </body> <script> document.getElementById("input").addEventListener("focus",function () { console.log("focus"); }); document.getElementById("input").addEventListener("mousedown",function () { console.log("mousedown"); }); document.getElementById("input").addEventListener("mouseup",function () { console.log("mouseup"); }); document.getElementById("input").addEventListener("input",function () { console.log("input"); }); document.getElementById("input").addEventListener("change",function () { console.log("change"); //上傳完後顯示圖片操作 }); document.getElementById("input").addEventListener("blur",function () { console.log("blur"); }); document.getElementById("input").addEventListener("click",function () { console.log("click"); }); </script>
web 圖片上傳實現本地預覽
web 圖片上傳實現本地預覽