如何在同一頁面瀏覽和顯示圖像？

我有一個很小的疑問。我有一個html標籤來瀏覽文件。並且當我從本地服務器瀏覽文件時，我想將該路徑設置爲圖像標籤的來源。有可能實現嗎？如何在同一頁面瀏覽和顯示圖像？

我已經編寫了類似這樣的代碼。

<form name="image" id="image" enctype="multipart/form-data" action="" method="post"> 

    <input type="file" name="img" /> 
    <img src=""></img> 

</file>

所以只要我瀏覽並選擇從本地服務器上的文件，該路徑應設置爲圖像tag.My目的是瀏覽圖片，並在頁面本身顯示出來。任何幫助將不勝感激。提前致謝。

來源

2012-05-16 Shashi Roy

什麼是「本地服務器」？ – jimpic

感謝您的快速回復。我運行在wamp上。 –

瀏覽器現在允許您從輸入[type = file]標籤中訪問文件的路徑，以獲得長的時間。你不能像你想要的那樣簡單地做。爲了完成用戶選擇文件後顯示文件的目標，您實際上需要將其上傳到服務器。這通常需要頁面刷新，但是有很多JavaScript庫可用，以便在不刷新頁面的情況下實現。文件上傳後，您可以「ping通」URL來查看圖像，並將其加載到圖像標籤中。

我一直在使用最近要做行內文件上傳的jQuery庫是jQuery File Upload

來源

2012-05-16 11:15:44

但我不想在操縱它之前將它發送到服務器。我正在努力工作Jcrop。但是在那個例子中，他們在我們加載頁面的那一刻就獲取了圖像。請檢查鏈接。並感謝您的快速回復。檢查鏈接後，請再次回覆我。 http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop –

他們也使用預定義的圖像，而不是用戶選擇/上傳的圖像。您必須將它們保存在服務器上，然後將它們加載回頁面，然後調用jcrop並執行操作。 –

你需要做的是在客戶端的文件的完整路徑 - 這是不允許的（見this thread）。

對不起，但沒有發送文件到服務器，除了獲取文件名（不是路徑），文件類型和文件大小外，您無法對它做任何事情。

來源

2012-05-16 11:30:35

我的意圖是瀏覽並設置url爲圖片標籤，因爲我需要爲JCrop圖片庫實現它。在他們的例子中，他們已經直接採取了路徑，當他們加載頁面時，圖像被加載。任何解決方案請參閱網頁的鏈接和源代碼。你會立即得到我的問題。請幫助我。提前致謝。這是鏈接deepliquid.com/projects/Jcrop/demos.php?demo=live_crop –

我看到的是一個簡單的裁剪功能：顯示服務器上的圖像 - 一些隱藏的輸入，其中包含要裁剪的座標，以及在提交時裁剪圖像的php腳本。如果你想使用客戶端的文件，你首先必須將其上傳到服務器，否則你無法做任何事情 - 這是一個安全功能。 –

oh ok ...所以，當你建議把它上傳到服務器上然後裁剪它時，如果用戶在服務器上上傳它，並且不裁剪它，那麼我們將在服務器上不必要地增加一個額外的文件。什麼是解決方案？ –

如何在同一頁面瀏覽和顯示圖像？

回答

相關問題