圖片上傳 - 在點擊提交之前在網頁上顯示圖片提交

爲了更好地學習網絡開發，我試圖編寫一個PHP頁面，讓我從服務器上傳和下載文件，這是我在ASP之前完成的。圖片上傳 - 在點擊提交之前在網頁上顯示圖片提交

但是，我絆倒了一些理由說應該很簡單，但我無法找到答案。

下面是瀏覽漂亮的標準碼/提交：

<form enctype="multipart/form-data" action="uploadFile.php" method="POST"/> 
<input type="hidden" name="MAX_FILE_SIZE" value="500000" /> 
<input type="file" name="pix" size="100" /> 
</form>

現在，當你點擊「瀏覽...」所產生的網頁按鈕，可以得到標準的文件對話框，然後返回在文本框中使用正確的文件路徑。（和，我的uploadfile.php工作得很好，當我點擊提交。）

我想要做的是實際上顯示用戶（好吧，我）的圖片在網頁上，如果它是一個IMG適合文件或非圖像文件的佔位符圖片 - 在用戶單擊提交按鈕之前。

注意客戶端文件的正確路徑名在頁面上爲RIGHT。我不能爲了我的生活找出如何從DOM中捕獲它，或者爲此弄清楚如何讓JavaScript注意到返回正確路徑名以便觸發顯示圖片。（我對這個問題的廣泛性表示歉意 - 我在這裏試過了很多關於以前的問題和答案的搜索，但是當我不僅僅缺乏技術術語而是概念時，很難構建一個問題）。

來源

2009-11-29 Connie H.

您可以用Firefox和支持文件列表API其他瀏覽器做到這一點。

var myImage = new Image(), 
myImage.src = myFileInput.files[0].getAsDataURL();

編輯：最大文件大小不應該在客戶端被指定爲可以利用，但你至少可以驗證它使用files[0].getAsBinary().length客戶端。

來源

2009-11-30 04:49:00

此功能在Firefox中可用！很好的回答！只是好奇哪些瀏覽器不支持它？ – umar 2009-12-11 10:31:49

@ m.u.sheikh：那麼，大的可能是Internet Explorer。雖然這只是一個猜測。 – Powerlord 2009-12-11 20:51:05

您可以使用Ajax在後臺提交表單並將圖像文件保存到臨時目錄。然後，嘗試通過更改img元素的src屬性在頁面上顯示它。當用戶最終點擊提交時，將圖像複製到其最終目的地。如果他取消或瀏覽 - 刪除文件。

來源

2009-11-29 21:43:15

兩個小問題 - 1）您必須將表單提交給（隱藏）iframe才能上傳文件。 2）對於大圖像，上傳過程可能需要很長時間，因此您需要進度指示器。 – 2009-11-30 23:36:10

好評。我相信新的HTML 5爲此提供了更好的解決方案（請參閱此頁面中的實際示例：https：//developer.mozilla.org/en/Using_files_from_web_applications），但它僅受FF 3.6 beta和Chrome 4 beta及更高版本的支持。 – 2009-12-01 00:00:51

想想你在問什麼。如果一個網頁可以從你的（不是服務器的）文件系統加載任意文件，那麼它會阻止它將私人數據發送到任何惡意網站？

來源

2009-11-29 21:45:47

您只能使用Flash進行此操作。

谷歌類似"flash image upload with preview"

來源

2009-11-29 21:49:09

您可以在不使用閃光燈的情況下進行此操作。所以它不是「只有Flash」。 – MitMaro 2009-11-29 21:59:41

@MitMaro：所以發佈解決方案... – 2009-11-29 23:07:37

你也可以使用Java或Silverlight – 2009-11-29 23:57:56

的確，對於您的問題沒有單一的解決方案。但在目前的網絡狀態下，最好的方式就是Flash。 See this post for a how-to。 Flash是一種專有的解決方案，但在所有計算機的98％以上都實現了，所以它是安全的。只要確保你遵循逐步增強/優雅的降級方法來實現它。

你可以通過一個Java小程序來做到這一點，它是廣泛可用和非專有的，但這似乎矯枉過正（但我不是Java開發人員）。

Silverlight？那麼，請向大多數用戶說再見。據我所知，它遠沒有被廣泛使用。所以人們將不得不爲他們安裝插件才能看到你的UI。但是，在某些情況下（內聯網，您可以自己手動設置的一組固定機器等）可能沒有問題。

基於ajax的解決方案具有不基於專有技術的優勢，但它意味着將文件上傳到服務器，所以它不是針對您的情況的解決方案，對於大圖像而言，需要相當長的時間，它不會再像預覽一樣了吧？

來源

2009-12-11 20:46:09 pixeline

這可以在不向IE9及其以上的所有瀏覽器發送任何數據的情況下完成。如果您需要IE9及更高版本的預覽功能，那麼您需要使用Flash，或者先將文件發送到服務器。 – 2013-05-10 15:22:16

如果您正在尋找一個非IE瀏覽器（包括IE 9）解決方案，這可能是解決方案。（當然隨着微調） http://www.html5rocks.com/en/tutorials/file/dndfiles/

否則你必須上傳並獲得從服務器的路徑顯示縮略圖或預覽。像flash/java/silverlight還有其他一些方法可以用於大多數瀏覽器，但它仍然不是純粹的Web解決方案。

來源

2013-05-10 11:39:49 nightgaunt

圖片上傳 - 在點擊提交之前在網頁上顯示圖片提交

回答

相關問題