Q

從HTML輸入文件形式存儲圖像局部

2012-12-01 30 views 3 likes

3

我想知道是否有可能將圖像從從HTML輸入文件形式存儲圖像局部

<input type="file" id="image">

在本地存儲。我需要存儲圖像嗎，還是隻需存儲圖像位置？

對於上下文來說，它來自一個表單，它從輸入表單中獲取名稱，地址等，創建一個對象並將其存儲在一個數組中並顯示該數組。

2012-12-01 Shuma

+1

您的意思是標準文件上傳？或者通過「本地」你是否指客戶？所選圖像是否已經在那裏？ – jtheman

+0

圖像在客戶端，如果可能的話我可以鏈接到文件，但是爲了表單的目的，有一種比文本框簡單的方式，用戶可以輸入完整的圖像路徑進入？這就是爲什麼我要進行文件上傳輸入，或試圖反正。 – Shuma

+0

你看過這個：http：// stackoverflow。com/questions/5903323/cant-get-value-of-input-type-file瀏覽器以不同的方式處理這個值，所以我的猜測是你的策略不起作用。 – jtheman

A

回答

1

否。因爲在本地操作系統上存儲文件或訪問文件會違反瀏覽器的權限。所以你的腳本不能訪問內容，除非已經上傳到服務器。另外不同的瀏覽器處理以不同方式選擇的文件的路徑。所以你遇到了一些問題。

也就是說，有一些方法可以解決這個問題，我不會討論。簡而言之，應該以某種方式將圖像上傳到服務器，然後腳本可以從上傳的路徑引用路徑或圖像本身。

2012-12-01 01:23:26 Twisty

1

沒辦法。但是，如果你能這樣做會引發嚴重的安全問題。

如果你試圖讓你的文件輸入例如值：

document.getElementById('image').value

值應該爲「C：\ fakepath \ somefile.txt」

2012-12-01 01:25:25 ntadic

0

如果你想獲得的文件名，甚至顯示圖像，您可以使用File API（位於browsers that support it）。出於安全原因，該路徑不可用。

2012-12-01 02:09:43 bfavaretto

9

相反，這裏其他的答案，如果您使用的是現代的瀏覽器，您可以獲取和存儲相當多的關於使用elm.files，FileReader和window.localStorage文件<input>的內容。你甚至可以告訴browser to save it again (default download behaviour)。

應當注意，這樣做並不意味着你可以在<input>節點上設置的.value。

下面是您可以做的一個例子，假設文件已被選中。

// From <input> node 
var elm = document.getElementById('image'), 
    img = elm.files[0], 
    fileName = img.name, // not path 
    fileSize = img.size; // bytes 

// By Parsing File 
var reader = new FileReader(), 
    binary, base64; 
reader.addEventListener('loadend', function() { 
    binary = reader.result; // binary data (stored as string), unsafe for most actions 
    base64 = btoa(binary); // base64 data, safer but takes up more memory 
}, false); 
reader.readAsBinaryString(img);

從這裏你可以在localStorage保存，從我們知道的圖像fileName創建dataURIs等。例如，說是一個的.jpg，那麼你可以通過設置<img>的SRC顯示它到"data:image/jpeg;base64," + base64。

請注意，此數據的任何修改都不會對所選原始文件產生任何影響。

2012-12-01 02:10:12

相關問題