MozTW 討論區
https://forum.moztw.org/

用JS如何實現上傳圖片前的預覽，以及取得該圖片的尺寸
https://forum.moztw.org/viewtopic.php?f=13&t=8457		 第 1 頁 (共 1 頁)
發表人:  sheen [ 2005-05-19, 19:01 ]
文章主題 :  用JS如何實現上傳圖片前的預覽，以及取得該圖片的尺寸
請版主刪除前一同主題貼（是否是主題太長造成帖子打不開）
請問:firefox下，用JS如何實現上傳圖片前的預覽，以及取得該圖片的尺寸（byte）
代碼段：
代碼:
<img src="" id="oImg" style="" onerror="alert('選擇圖片')">
<input type="file" name="oUpload"  onchange="pic_u.innerHTML=oImg.src=this.value;
pic_w.innerHTML=oImg.width;
pic_h.innerHTML=oImg.height;
pic_s.innerHTML=oImg.fileSize;
ul.innerHTML='<img src=' + oImg.src +  ' >';">
<a id=ul></a>

<p>宽<a id=pic_w></a>
</p>
<p>长<a id=pic_h></a>
</p>
<p>大小<a id=pic_s></a>
</p>
<p>路径<a id=pic_u></a>

以上代碼在IE下能取得圖片的長寬和尺寸（byte）
但在firefox下，僅oImg.height和oImg.width有效
oImg.fileSize無效
而預覽圖片就不能實現.
不知道用什麽方法可以進行圖片預覽及取得圖片尺寸
發表人:  訪客 [ 2005-05-20, 04:05 ]
文章主題 : 
fileSize為IE專用屬性,firefox似乎沒有提供相同的東西
要預覽的話src在前面加上file:///就可以了...
發表人:  danielwang [ 2005-05-20, 04:57 ]
文章主題 : 
<input type="file"> 在 Firefox 內禁止用 script 存取（這是安全考量）
發表人:  softcup [ 2005-05-20, 08:02 ]
文章主題 : 
1. 利用 <input type="file"> 的 onchange 事件，取得 value 值。
2. 轉換 value，在前面加上 file:///，"\" 轉成 "/"，空白 (space) 轉成 %20，還有一些必須特殊字要轉，不過，我忘了。 :P
3. 將轉換後的 value 值指定給 <img> 的 src。
4. 利用 <img> 的 onload 事件來呼叫要處理的 function。

PS1: 在中文的檔名或目錄下無法運作，不知道 firefox 怎麼處理的。
PS2: 最好直接刪除舊的再新增新的 img，並利用 innerHTML 或 DOM 的方式將 img 插入要顯示的位置。
還有不要設定 width 與 height，不然永遠無法取得真正的 width 與 height。
發表人:  訪客 [ 2005-05-20, 09:41 ]
文章主題 : 
我這樣寫,IE跟firefox都正常,中文路徑也沒問題:
代碼:
<input type="file"
onChange="document.getElementById('img1').src=
'file:///'+this.value;document.getElementById('pp').innerHTML=this.value"><br>
<img alt="image" id="img1"
onLoad="document.getElementById('ww').innerHTML=this.width;
document.getElementById('hh').innerHTML=this.height"><br>
width: <span id="ww"></span><br>
height: <span id="hh"></span><br>
path: <span id="pp"></span>
發表人:  sheen [ 2005-05-21, 02:15 ]
文章主題 : 
另外又齣現一個問題:
firefox瀏覽器下:
代碼:
<input type="file"
onChange="document.getElementById('img1').src=
'file:///'+this.value;document.getElementById('pp').innerHTML=this.value"><br>
<img alt="image" id="img1"
onLoad="document.getElementById('ww').innerHTML=this.width;
document.getElementById('hh').innerHTML=this.height"><br>
width: <span id="ww"></span><br>
height: <span id="hh"></span><br>
path: <span id="pp"></span>

採用本地瀏覽的方式(file:///D:/mt//pic_add.htm)能夠預覽圖片,取得長,寬和圖片路徑
而採用網站瀏覽方式(http://127.0.0.1/pic_add.htm)隻能夠取得圖片路徑,不能預覽圖片,也無用法取得長和寬度.
發表人:  訪客 [ 2005-09-24, 17:17 ]
文章主題 : 
Anonymous 寫:
我這樣寫,IE跟firefox都正常,中文路徑也沒問題:
代碼:
<input type="file"
onChange="document.getElementById('img1').src=
'file:///'+this.value;document.getElementById('pp').innerHTML=this.value"><br>
<img alt="image" id="img1"
onLoad="document.getElementById('ww').innerHTML=this.width;
document.getElementById('hh').innerHTML=this.height"><br>
width: <span id="ww"></span><br>
height: <span id="hh"></span><br>
path: <span id="pp"></span>


請問您是用哪一版的 firefox,
我試的結果都會出現 "安全性錯誤" 的訊息!!
發表人:  sheen [ 2005-09-27, 03:47 ]
文章主題 :  re
以前的1.0，現在的1.07都沒問題
應該是你的瀏覽器設置原因,或者是某個插件引起錯誤
建議刪除\Application Data\Mozilla\Firefox下的配置文件及插件（備份后），重新配置firefox及重裝必要插件。盡量少的插件可加快瀏覽器反應速度，避免一些錯誤產生。

另外,最近發現，tinymce網頁在綫編輯器的MCimagemanager及MCfilemanager這2個插件都非常不錯，十分強大。上傳、瀏覽、刪除、在綫壓縮及解壓。圖片及文件管理十分方便。
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/