使用jQuery對話框在ASP.NET MVC站點上傳照片

我正在構建一個ASP.NET MVC 3應用程序，並且我正嘗試使用jQuery對話框上傳照片。這裏是我的代碼，但問題是我的model（巫婆代表要上傳的文件）的HttpPostedFileBase對象在服務器端始終爲空（方法HttpPost）。使用jQuery對話框在ASP.NET MVC站點上傳照片

我控制器

public ActionResult AddProductPhoto(int id) 
{ 
    var model = new UploadImageModel {ProductId = id}; 
    return PartialView("_UploadFile", model); 
} 

[HttpPost] 
public ActionResult AddProductPhoto(UploadImageModel model) 
{ 
    // model.File is always null 
    return Json(new { Success = true }); 
}

模型

public class UploadImageModel 
{ 
    public int ProductId { get; set; } 

    [FileExtensions(Extensions = "jpg, jpeg, png")] 
    public HttpPostedFileBase File { get; set; } 
}

上傳局部視圖（_UploadFile）

@model DalilCompany.Models.UploadImageModel 

@using (Html.BeginForm("AddProductPhoto", "Product", FormMethod.Post, 
     new { id = "uploadProductPhotoForm", enctype = "multipart/form-data" })) 
{ 
    @Html.ValidationSummary(true) 

    @Html.HiddenFor(m => m.ProductId) 

    <div> 
     @Html.LabelFor(m => m.File) 
     @Html.TextBoxFor(m => m.File, new { type = "file" }) 
    </div> 
}

主視圖

<span productId ="@Model.ProductId" id="add_product_photo_link"> 
    Upload photo 
</span> 
<div id="AddPhotoDlg" title="" style="display: none"></div> 

<script type="text/javascript"> 
    $(function() { 
     $("#AddPhotoDlg").dialog({ 
      autoOpen: false, 
      width: 550, 
      height: 250, 
      modal: true, 
      buttons: { 
       "Upload": function() { 
        $.post("/Product/AddProductPhoto", 
        $("#uploadProductPhotoForm").serialize(), 
        function() { 
         $("#AddPhotoDlg").dialog("close"); 
         alert('upload success'); 
        }); 
        }, 
       "Close": function() { $(this).dialog("close"); } 
      } 
     }); 
    }); 

    $("#add_product_photo_link").click(function() { 
     var id = $(this).attr("productId"); 

     $("#AddPhotoDlg").html("") 
      .dialog("option", "title", "Ajouter une photo") 
      .load("/Product/AddProductPhoto/" + id, 
       function() { $("#AddPhotoDlg").dialog("open"); }); 
    });           
</script>

來源

2013-08-20 SidAhmed

我發現this question and answer，我已經決定要改變我接受和使用HTML5來解決我的問題。謝謝，祝你好運。

使用HTML5，您可以使用Ajax和jQuery進行文件上傳。不僅您可以做文件驗證（名稱，大小和MIME類型）或處理帶有HTML5進度標記（或div）的進度事件。

來源

2013-08-24 20:54:48 SidAhmed

$(function(){ 
$("#JqPostForm").submit(function(e){  
    e.preventDefault(); 

    $.post("process_form.php", $("#JqPostForm").serialize(), 
    function(data){ 
     if(data.email_check == 'invalid'){ 

       $("#message_post").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>"); 
     } else { 
      $("#message_post").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>"); 
      } 
    }, "json");  
});});

我建議你應該使用類似的東西來觸發表單提交動作

來源

2013-08-20 00:47:30 user2584307

我不需要提交表單按鈕，我在'上傳'按鈕中處理它（請參閱對話框的定義）。另外，通過調試，我點擊了HttpPost方法... – SidAhmed

-1

您不能上傳使用.post的$或jQuery的AJAX文件據我知道。所以

$("#uploadProductPhotoForm").serialize()

不序列化文件輸入。

你可以在你提交功能，做的是：

得到的文件輸入使用javascript：

var fileInput = document.getElementById("IdOfYourFileInput");

它必須包含該文件選中文件，然後你可以用它上傳一個files屬性FormData和XMLHttpRequest

var form = new FormData(); 
form.append("NameOfTheInput", fileInput.files[0]); 
form.append("NameOftheId", id);//this is your productId 
var xhr = new XMLHttpRequest(); 
xhr.open("POST", "/Product/AddProductPhoto/", true): 
xhr.send(form);

來源

2013-08-20 03:16:18 WannaCSharp

使用jQuery對話框在ASP.NET MVC站點上傳照片

回答

相關問題