如何通過jQuery上傳文件？

我想知道如何做到這一點像jQuery ajax。現在我有一個jQuery UI對話框彈出窗口，它有一個html輸入文件。如何通過jQuery上傳文件？

現在，當用戶點擊導入我想用jQuery做一個ajax post到服務器。

我不知道如何將文件傳遞給我的操作視圖。

現在我把它做了充分的回傳，所以我有這個

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{%> 
    <br /> 
    <p><input type="file" id="file" name="file" size="23 accept="text/calendar"></p><br /> 
    <p><input type="submit" value="Upload file" /></p>   

<% } %>

然後在我的控制器

public ActionResult Import(HttpPostedFileBase file)

所以我不知道如何在HttpPostedFileBase通過使用jQuery和如何在jQuery中設置enctype = "multipart/form-data"。

編輯

玉以及jQuery的形式插件似乎是要走的路。

$('#frm_ImportCalendar').livequery(function() 
{ 
    var options = { 
     dataType: 'json', 
     success: function(response) 
     { 
      alert(response); 
     } 
    }; 

    $(this).ajaxForm(options); 
});

我想知道爲什麼我的JSON不工作，但有人提到你不能像現在這樣使用它。我正在檢查某人能夠使用json的其他鏈接。

我不確定爲什麼在Lck中使用.submit之前的ajax提交方法。

編輯

我怎麼能更改文件上傳JSON結果返回我的字典陣？

 Dictionary<string, string> result = new Dictionary<string, string>(); 
     result.Add("Msg", "Success!!"); 
     result.Add("Body", calendarBody); 

// how can I change this? 
    return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully.", System.IO.Path.GetFileName(file.FileName)) } };

來源

2010-01-07 chobo2

使用jQuery表單插件，您可以完成異步文件上傳。退房下面的鏈接，

的jQuery表單插件 - 代碼示例 - 文件上傳 http://jquery.malsup.com/form/#file-upload

祝你好運！

來源

2010-01-07 22:42:07 morindo

如Dominic所示，使用jQuery Form plugin。您已經構建的表單應該已經正確工作。只需添加一個ID來標識它：

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { id = "asyncForm", enctype = "multipart/form-data" }))

和使用jQuery形式發佈的數據：

$(document).ready(function(){ 
    $('#asyncForm').submit(function(){ 
     $(this).ajaxSubmit({ 
      beforeSubmit: function(){ 
       //update GUI to signal upload 
      } 
      data: { additional = 'value' }, 
      dataType: 'xml', 
      success: function(xml){ 
       //handle successful upload 
      } 
     }); 
    }); 
});

注意，在形式返回的數據類型是上傳文件不能是JSON。在控制器的方法中使用XML或HTML作爲響應。

來源

2010-01-07 22:58:06 LorenzCK

我只是到這裏來問，爲什麼它不會返回JSON笑。我做了類似的事情，但Id id沒有指定.submit。到目前爲止，請參閱編輯。 – chobo2 2010-01-07 23:31:19

由於安全原因（它記錄在jQuery Form網頁上），JavaScript無法接受JSON作爲上傳文件的請求的數據格式。我建議你使用XML，這是_almost_就像使用jQuery的JSON一樣簡單......或者用換行符分隔純文本中的值。我明確使用了.ajaxSubmit，因爲我從我自己的項目的一些代碼中拿了一些代碼，在那裏我使用了一些更多的東西。無論如何，這應該與您的代碼實際上相同。 – LorenzCK 2010-01-08 00:01:45

那麼這個XML是怎麼樣的。我發佈了我轉換爲Json結果的字典集合，我怎樣才能將它轉換爲XML。 – chobo2 2010-01-08 00:11:40

我能夠通過AJAX使用jQuery Form plugin和定製的JsonResult類來上傳文件，如here所述。

使用此返回喜歡你的字典

return new FileUploadJsonResult { Data = new { Msg = "Success!!", Body = calendarBody } };

，並在回調函數來獲取你的信息

success: function(result) { 
    $("#ajaxUploadForm").unblock(); 
    $("#ajaxUploadForm").resetForm(); 
    alert(result.Msg); 
}

來源

2010-01-07 23:08:38

什麼是$ .growlUI（null，result.message）;？我不確定growlUI是什麼，如果那是我需要的。我也必須將iframe設置爲true嗎？ – chobo2 2010-01-07 23:39:49

另外什麼是在這個傑森關鍵和價值？它是數據還是消息？請參閱編輯。 – chobo2 2010-01-07 23:47:50

是的，iframe需要是真實的。 $ .growlUI沒有必要，它只是一個特殊的動畫通知。 – 2010-01-08 14:28:28

如何通過jQuery上傳文件？

回答

相關問題