MozTW 討論區 • 檢視主題 - 用JS如何實現上傳圖片前的預覽，以及取得該圖片的尺寸

所有顯示的時間為 UTC + 8 小時

用JS如何實現上傳圖片前的預覽，以及取得該圖片的尺寸

第 1 頁 (共 1 頁)

[ 8 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

sheen

文章主題 : 用JS如何實現上傳圖片前的預覽，以及取得該圖片的尺寸

發表於 : 2005-05-19, 19:01

註冊時間: 2004-12-25, 06:07
文章: 13

請版主刪除前一同主題貼（是否是主題太長造成帖子打不開）
請問: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無效
而預覽圖片就不能實現.
不知道用什麽方法可以進行圖片預覽及取得圖片尺寸

回頂端

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)

訪客

文章主題 :

發表於 : 2005-05-20, 04:05

fileSize為IE專用屬性,firefox似乎沒有提供相同的東西
要預覽的話src在前面加上file:///就可以了...

回頂端

Mozilla/5.0 (Windows; U; Win98; zh-TW; rv:1.7.6) Gecko/20050226 Firefox/1.0.1

danielwang

文章主題 :

發表於 : 2005-05-20, 04:57

[MozTW 版主群]

註冊時間: 2003-09-15, 03:47
文章: 1016
來自: Taiwan

<input type="file"> 在 Firefox 內禁止用 script 存取（這是安全考量）

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414

softcup

文章主題 :

發表於 : 2005-05-20, 08:02

[網站管理員]

註冊時間: 2002-11-04, 13:31
文章: 463
來自: 港都

1. 利用 <input type="file"> 的 onchange 事件，取得 value 值。
2. 轉換 value，在前面加上 file:///，"\" 轉成 "/"，空白 (space) 轉成 %20，還有一些必須特殊字要轉，不過，我忘了。

3. 將轉換後的 value 值指定給 <img> 的 src。
4. 利用 <img> 的 onload 事件來呼叫要處理的 function。

PS1: 在中文的檔名或目錄下無法運作，不知道 firefox 怎麼處理的。
PS2: 最好直接刪除舊的再新增新的 img，並利用 innerHTML 或 DOM 的方式將 img 插入要顯示的位置。
還有不要設定 width 與 height，不然永遠無法取得真正的 width 與 height。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.7.8) Gecko/20050511 Firefox/1.0.4

訪客

文章主題 :

發表於 : 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>

回頂端

Mozilla/5.0 (Windows; U; Win98; zh-TW; rv:1.7.6) Gecko/20050226 Firefox/1.0.1

sheen

文章主題 :

發表於 : 2005-05-21, 02:15

註冊時間: 2004-12-25, 06:07
文章: 13

另外又齣現一個問題:
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)隻能夠取得圖片路徑,不能預覽圖片,也無用法取得長和寬度.

回頂端

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)

訪客

文章主題 :

發表於 : 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,
我試的結果都會出現 "安全性錯誤" 的訊息!!

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.7.10) Gecko/20050717 Firefox/1.0.6

sheen

文章主題 : re

發表於 : 2005-09-27, 03:47

註冊時間: 2004-12-25, 06:07
文章: 13

以前的1.0，現在的1.07都沒問題
應該是你的瀏覽器設置原因,或者是某個插件引起錯誤
建議刪除\Application Data\Mozilla\Firefox下的配置文件及插件（備份后），重新配置firefox及重裝必要插件。盡量少的插件可加快瀏覽器反應速度，避免一些錯誤產生。

另外,最近發現，tinymce網頁在綫編輯器的MCimagemanager及MCfilemanager這2個插件都非常不錯，十分強大。上傳、瀏覽、刪除、在綫壓縮及解壓。圖片及文件管理十分方便。

回頂端

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)

第 1 頁 (共 1 頁)

[ 8 篇文章 ]

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：Bing [Bot] 和 27 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :