建議上傳圖像使用jQuery AJAX

我有一個具有3個輸入端的一種形式：建議上傳圖像使用jQuery AJAX

[1]的狀態更新文本輸入字段

[2]的文件上傳（爲一個畫面）

[3]用於附加鏈接的文本輸入字段

用戶在每個人之間切換，具體取決於他們想要做什麼。例如，當選擇[2]時，輸入[1]和[3]被隱藏。

所有這些輸入都包含在一個表單中，編號爲posts_form。選項[1]和[3]通過Ajax發佈到不同的控制器。

我現在的問題是選項[2]，因爲它不可能使用jQuery ajax上傳圖像。

我見過的一些解決方案涉及到使用jQuery Form插件，但我想知道是否可以在不使用插件的情況下進行圖片上傳。

例如，這將是上傳的代碼基礎，哪個當然不起作用。

$.ajax({ 
     url: 'chat/upload/' + <?php echo $page_id; ?>, 
     type: 'POST', 
     data: $('#posts_form').serialize(), 
     dataType: 'html', 
     beforeSend: function(){ 
       $('#loading').show(); 
      },   
     success: function(html) { 
      $('#attach').replaceWith(html); 
      $('#loading').hide(); 
      $('#posts_form input').val(''); 
      $('.posts_link').val(''); 
      $('#chat_input').hide(); 
      } 
     });

有什麼建議可以添加/更改什麼，以允許使用jQuery僅上傳圖片，而無需插件？

謝謝。

來源

2011-06-24 pepe

你最好的選擇是這個插件。如果沒有這個，你會浪費你的時間。

http://jquery.malsup.com/form/

來源

2011-06-24 00:32:38 jchavannes

有通過AJAX上傳的文件沒有直接的方法。這是HTML4的限制。解決方法是使用iframe或Flash。

在HTML5中，引入了File API來解決這個問題。下面是一個利用該API的演示（使用Firefox 3.6+），它允許您拖放圖像並加載它，而無需將其發送回服務器：http://html5demos.com/file-api。它也支持多個文件：http://demos.hacks.mozilla.org/openweb/DnD/。

如果您熱衷，您可以閱讀that specification on W3.org。

如果你不能依賴於客戶端具有瀏覽器支持HTML5的File API，您可以將卷您擁有或選擇使用實現的iframe解決方法庫：

來源

2011-06-24 02:18:31

thx @william - 我正在嘗試jQuery窗體，但我遇到了觸發提交的問題，因爲我的按鈕不是通過使用'input type = submit'呈現的 - [請參閱這裏爲我發佈的新問題]（http：// stackoverflow .com/questions/6462730/how-to-trigger-submit-using-jquery-form-when-button-is-not-rendered-using-type-su） - 我還會檢查你的其他解決方案 – pepe

建議上傳圖像使用jQuery AJAX

回答

相關問題