我有一个"联系我们"表单,它工作正常,但现在,在试图阻止页面重新加载时,我不得不使用ajax。表单正在序列化,但现在我无法添加任何附件文件。
我使用的代码如下。任何帮助将不胜感激。
<div id="respond" class="comment-respond">
@model Umbraco.AddingValues.Web.Model.ContactUs
@using (Html.BeginUmbracoForm("Contact", "ContactUsSurface", FormMethod.Post, new { @class = "contact-form", @id ="myForm", @enctype="multipart/form-data"} ))
{
@Html.ValidationSummary(true)
<div id="form">
<div class="comment-form-author">
@Html.LabelFor(x => x.Name)
@Html.TextBoxFor(x => x.Name)
@Html.ValidationMessageFor(x => x.Name)
</div>
<div class="comment-form-author">
@Html.LabelFor(x => x.Company)
@Html.TextBoxFor(x => x.Company)
@Html.ValidationMessageFor(x => x.Company)
</div>
<div class="comment-form-email">
@Html.LabelFor(x => x.EmailFrom, "Email")
@Html.TextBoxFor(x => x.EmailFrom)
@Html.ValidationMessageFor(x => x.EmailFrom,"Please enter a valid Email Address")
</div>
<div class="comment-form-author">
@Html.LabelFor(x => x.Tel)
@Html.TextBoxFor(x => x.Tel)
@Html.ValidationMessageFor(x => x.Tel)
</div>
<div class="comment-form-url">
@Html.LabelFor(x => x.Intrested)
@Html.TextBoxFor(x => x.Intrested)
@Html.ValidationMessageFor(x => x.Intrested)
</div>
<div class="comment-form-comment" >
@Html.LabelFor(x => x.Message)
@Html.TextAreaFor(x => x.Message)
@Html.ValidationMessageFor(x => x.Message)
</div>
</div>
<div class="forms-button" id="submitbutton">
<input id="submit" class="button" name="submit" type="button" value="submit" onclick="submitSearchForm_ajax('myForm', 'message')"/>
<div class="fileUpload ">
@* <input type="file" class="upload" />*@
<input type="file" name="attachment" id="attachment" class="upload" value ="Upload" />
</div>
<div id="message" style="display:none">
<br />
<div style="margin-top:10px">
<h2>Thank You! Your message has been recieved.</h2>
</div>
</div>
</div>
}
</div>
这是我正在使用的脚本:
function submitSearchForm_ajax(formid, updateDivid) {
var form = $("#" + formid);
//var formData = new FormData($('myForm')[0]);
$('#message').css('display', 'none');
//var formData = new FormData($('#myForm')[0]);
$.ajax({
url: form.attr("action"),
//data: form.serialize() ,
data: form.serialize(),
type: 'POST',
success: function (message) {
$('#message').css('display', 'block');
if (message == "Failed") {
$('#message').html('Error submitting form.');
}
else {
$('#message').html(message);
$("#form :input[type='text']").val('');
}
}
})
}