沒有頁面刷新＆然後上傳圖片顯示圖像

我有一個按鈕，允許用戶選擇一個圖像 - 如下所示：沒有頁面刷新＆然後上傳圖片顯示圖像

 <div id="fileUpload"> 
      <form id="joinPhotoUploadForm" method="POST" enctype="multipart/form-data"> 
      <input type="file" id="file"/> 
      </form> 
      <div id="fakefile"> 
      <img src="../../images/button-grey-enhanced.png" id="usePhotoSubmit" alt="BROWSE for Photo"> 
      <span id="usePhoto">BROWSE</span> 
      </div> 
     </div>

我然後需要將圖像上傳到服務器，並顯示在圖像沒有頁面刷新的同一頁面。我已經試過如下：

$('input#file').change(function() { 
    $('form#joinPhotoUploadForm').submit(); 
});

我如何能得到的圖片上傳，沒有一個頁面在同一頁上顯示的刷新任何建議？

THX

來源

2012-09-07 Adam

你會需要一個AJAX調用，而不是一個表單提交......或者說，不是一個表單提交這樣提供的解決方案。看看'$ .post（）'。 –

你可以使用AJAX作爲@JeremyHolovacs建議，或者你可以簡單地使用一個iframe，如果你沒有頁面刷新的願望是純粹的美學。 –

，你可以嘗試在本教程中 http://www.youtube.com/course?list=EC7C25B2F18F68F3EF&feature=plcp

來源

2012-09-08 00:34:34 Erfan

你有沒有考慮一個奇特的上傳像Uploadify或Pupload？

來源

2012-09-08 00:27:58 Robyflc

我想避免因素的閃光燈因素...小工具支持IE7＆8嗎？ – Adam

兩者都可以使用html5（實際上uploadify html 5版本不是免費的，但花費5塊錢）。我幾乎可以肯定它的確如此。 – Robyflc

您可以使用現代瀏覽器中提供的FileReader和File API在上傳文件之前先讀取文件客戶端並顯示預覽，然後允許用戶在驗證預覽後上傳。您還可以實現從桌面拖放圖像到瀏覽器，而不是傳統的文件選擇輸入。

這裏是一個教程吧：http://www.html5rocks.com/en/tutorials/file/dndfiles/

在舊的瀏覽器，你可以只是回落到一個傳統的文件輸入與頁面重新加載。

來源

2012-09-08 00:31:35 Mark

沒有頁面刷新＆然後上傳圖片顯示圖像

回答

相關問題