文章參考此站點(diǎn)應(yīng)用，演示：http://www.ibisai.com.cn/
今天在做一個(gè)考試系統(tǒng)，需要上傳證件照，在選取了文件之后，需要首先預(yù)覽一下。也就是在沒(méi)有上傳前先預(yù)覽。
這個(gè)最讓人頭痛的就是兼容各種瀏覽器，往往IE的可以了，其他的瀏覽器又不行，經(jīng)過(guò)大半天的嘗試，終于能夠通過(guò)所有瀏覽器。以下是相應(yīng)的js代碼：
注意，所有的js文件只有兩個(gè)是外部接口，也就是兩個(gè)id，分別是上傳控件<input type="file">的id為fileid，還有<div>的id為preview，此來(lái)顯示圖片。
最后應(yīng)用到自己的項(xiàng)目時(shí)，只需在以下js代碼里改掉這兩個(gè)id為自己的id即可。
- // 獲取本地上傳的照片路徑
- function getPath(obj) {
- if (obj) {
- //ie
- if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
- obj.select();
- // IE下取得圖片的本地路徑
- return document.selection.createRange().text;
- }
- //firefox
- else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
- if (obj.files) {
- // Firefox下取得的是圖片的數(shù)據(jù)
- return obj.files.item(0).getAsDataURL();
- }
- return obj.value;
- }
- return obj.value;
- }
- }
- //顯示圖片
-
- function previewPhoto(){
- var picsrc=getPath(document.all.fileid);
- var picpreview=document.getElementById("preview");
- if(!picsrc){
- return
- }
- if(window.navigator.userAgent.indexOf("MSIE") >= 1) {
- if(picpreview) {
- try{
- picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc;
- }catch(ex){
- alert("文件路徑非法，請(qǐng)重新選擇！") ;
- return false;
- }
- }else{
- picpreview.innerHTML="<img src='"+picsrc+"' />";
- }
- }
- }
-
-
-
- function preImg(fileid, imgid) {
- if (typeof FileReader == 'undefined') {
- var picsrc=getPath(document.all.fileid)
- $("#imgid").attr({ src: picsrc});
- previewPhoto();
- }
- else{
- var reader = new FileReader();
- var name=$("#fileid").val();
- var picpreview=document.getElementById("preview");
- reader.onload = function(e) {
- var img = document.getElementById(imgid);
- //img.src = this.result;
- picpreview.innerHTML="<img src='"+this.result+"' style='width: 179px; height: 189px;' />";
- }
- reader.readAsDataURL(document.getElementById(fileid).files[0]);
- }
- }
- <div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:180px;height:190px;border:solid 1px black;">
-
- lt;input type="file" id="fileid" name="photofile" onchange="preImg(this.id,'imgid');"/>
不能合理的運(yùn)行，可以給我留言。
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
