サーバー側のアクションメソッドへのformData
の投稿に問題があります。 ajax呼び出しはサーバーにファイルを送信しないため、次のように手動でファイルアップローダーデータをformData
に追加する必要があります。
var formData = new FormData();
formData.append("imageFile", $("#imageFile").file);
formData.append("coverFile", $("#coverFile").file);
Ajax呼び出しを使用してフォームデータをサーバーに送信する必要があるjQuery関数を作成しました。動作しますが、サーバー側に投稿されたformData
は常にnullです!
これは私のスクリプトです:
<script>
function SubmitButtonOnclick()
{
var formData = new FormData();
formData.append("imageFile", $("#imageFile").file);
formData.append("coverFile", $("#coverFile").file);
$.ajax({
type: "POST",
url: '@Url.Action("EditProfile", "Profile")',
data: formData,
dataType: 'json',
contentType: "multipart/form-data",
processData: false,
success: function (response) {
$('#GeneralSection').html(response.responseText);
},
error: function (error) {
$('#GeneralSection').html(error.responseText);
}
});
}
</script>
編集1:これはコントローラーのアクションメソッドです:
public ActionResult EditProfile(ProfileGeneralDescription editedModel,
HttpPostedFileBase imageFile,
HttpPostedFileBase coverFile,
string postOwnerUser)
{
try
{
if (postOwnerUser == User.Identity.Name)
{
// edit codes...
var result = GetProfileGeneralDescription(postOwnerUser);
return PartialView("_GeneralProfile", result);
}
else
{
var error = new HandleErrorInfo(
new Exception("Access Denied!"),
"Profile",
EditProfile
return PartialView("~/Views/Shared/Error.cshtml", error);
}
}
catch (Exception ex)
{
var error = new HandleErrorInfo(ex, "Profile", EditProfile
return PartialView("~/Views/Shared/Error.cshtml", error);
}
}
編集2: Cshtmlビューファイルの内容:
@model Website.Models.ViewModel.Profile
@using (Ajax.BeginForm("EditProfile", "Profile", new { postOwnerUser = User.Identity.Name }, new AjaxOptions()
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "GeneralSection"
}, new { enctype = "multipart/form-data" }))
{
<div>
<button id="btnSubmit" type="button" onclick="SubmitButtonOnclick()">Submit</button>
</div>
<input type="hidden" name="username" id="username" value="@Model.Username"/>
<fieldset>
<legend>Edit Photos</legend>
<div>
Select profile picture:
<input id="imageFile" type="file" name="imageFile" accept="image/png, image/jpeg" />
@Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>Remove profile photo</span>
</div>
<div>
Select cover picture:
<input id="coverFile" type="file" name="coverFile" accept="image/png, image/jpeg" />
@Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>RemoveCover</span>
</div>
</fieldset>
}
ヒント、リンク、またはコード例があれば役立ちます。
前もって感謝します!
Jquery Ajaxの代わりに使用できます
<script>
function SubmitButtonOnclick()
{
var formData= new FormData();
var imagefile=document.getElementById("imageFile").files[0];
var coverfile=document.getElementById("coverFile").files[0];
formData.append("imageFile",imageFile);
formData.append("coverFile",coverFile);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/Profile/EditProfile", true);
xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
xhr.send(formData);
}
function UploadComplete(evt) {
if (evt.target.status == 200)
alert("Logo uploaded successfully.");
else
alert("Error Uploading File");
}
function UploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
</script>
これは私のために働く!!
変更を加えたスクリプト
function SubmitButtonOnclick() {
var formData = new FormData();
var file = document.getElementById("imageFile").files[0];
var file1 = document.getElementById("coverFile").files[0];
formData.append("imageFile", file);
formData.append("coverfile", file1);
$.ajax({
type: "POST",
url: '@Url.Action("EditProfile","Default1")',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
$('#GeneralSection').html(response.responseText);
},
error: function (error) {
$('#GeneralSection').html(error.responseText);
}
});
}
<input type="file" id="picfile" name="picf" />
<input type="text" id="txtName" style="width: 144px;" />
$("#btncatsave").click(function () {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;
var file = document.getElementById("picfile").files[0];
formData.append("FileUpload", file);
formData.append("Name", Name);
$.ajax({
type: "POST",
url: '/Category_Subcategory/Save_Category',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (msg) {
alert(msg);
},
error: function (error) {
alert("errror");
}
});
});
[HttpPost]
public ActionResult Save_Category()
{
string Name=Request.Form[1];
if (Request.Files.Count > 0)
{
HttpPostedFileBase file = Request.Files[0];
}
}
Iframeを使用してjqueryでファイルをアップロードできました。ブログの投稿で同じことを説明しました。リンクをクリックして回答を取得してください。
http://kaushikghosh12.blogspot.com/2014/02/ajax-fileupload-on-all-browsers.html