ارسال فایل و تصویر به همراه دادههای دیگر از طریق jQuery Ajax
نویسنده: علی یگانه مقدم
تاریخ: ۱۳۹۵/۰۶/۲۱ ۲۰:۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
return request.Headers["X-Requested-With"] == "XMLHttpRequest";
<div>
<label>تصویر</label>
<div>
<input id="picture" type="file" data-buttonText="انتخاب تصویر">
</div>
</div>
<div>
<label>کد ملی</label>
<div>
<input id="txtNationalCode" required="" maxlength="10" type="text">
</div>
</div>
<div>
<label>نام</label>
<div>
<input id="txtName" type="text" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-primary" id="btnSubmit" type="submit">ذخیره</button>
<button class="btn btn-white" id="btnClear" type="submit">لغو</button>
</div>
</div> var formData = new FormData();
formData.append('FirstName', $("#txtName").val());
formData.append('NationalCode', $("#txtNationalCode").val());
jQuery.each($('#picture')[0].files, function (i, file) {
formData.append('picture-'+i, file);
});
$.ajax({
type: "POST",
dataType: "json",
url: address,
data: formData,
success:
function (data) {
//.....
},
error:
function (data) {
//......
}
}); @using (Html.BeginForm("Multiple", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) {
<input type="file" name="files" multiple />
<button class="btn btn-default">Upload</button>
} @using (Html.BeginForm("Multiple", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) {
<input type="file" name="files" /><br />
<input type="file" name="files" /><br />
<input type="file" name="files" /><br />
<button class="btn btn-default">Upload</button>
} [HttpPost]
public ActionResult Multiple(IEnumerable<HttpPostedFileBase> files)
{
foreach (var file in files)
{
if (file != null && file.ContentLength > 0)
{
file.SaveAs(Path.Combine(Server.MapPath("/uploads"), Guid.NewGuid() + Path.GetExtension(file.FileName)));
}
}
return View();
} foreach (string file in Request.Files)
{
var hpf = Request.Files[file] as HttpPostedFileBase;
// todo: save it
}
@using (Ajax.BeginForm("Upload", "Attachment", FormMethod.Post,
new AjaxOptions
{
HttpMethod = "POST",
},
new
{
encType = "multipart/form-data",
id = "attach-form"
}))
{
@Html.AntiForgeryToken()
@Html.TextBoxFor(m => m.FirstName })
<input type="file" name="Files" data-buttonText="انتخاب تصویر">
<button type="submit">ارسال</button>
} var formData = new FormData();
$('form').submit(function() {
var action = $(this).attr('action');
var formData = new FormData($(this).get(0));
$.ajax({
type: "POST",
dataType: "json",
url: action,
data: formData,
processData: false,
contentType: false,
success: function(data) {
//...
}
success: function(data) {
//...
}
});
return false;
}); public class MyModel
{
public string FirstName{ get; set; }
public IEnumerable<HttpPostedFileBase> Files { get; set; }
} [AjaxOnly]
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Upload(MyModel model)
{
if (!ModelState.IsValid)
return //....
if(model.Files != null)
foreach (var file in model.Files)
if (file != null && file.ContentLength > 0)
{
// ....
}
} var formData = new FormData();
var splitedKeywords = $('#keywords').val().split(',');
formData.append('Keywords', JSON.stringify(splitedKeywords)); "\"کلمه اول\",\"کلمه دوم\""
var formData = new FormData();
var splitedKeywords = $('#keywords').val().split(',');
for (var counter = 0; counter < splitedKeywords.length; counter++) {
formData.append('Keywords', JSON.stringify(splitedKeywords[counter]));
} $.post( "manage/test", { name: "John", time: "2pm" })
.done(function( data ) {
alert( "Data Loaded: " + data );
}); var name = Request["name"].ToString(); var time = Request["time"].ToString();
var formData = new FormData();
formData.append('Organizations', $('#Organizations').val());
formData.append('OrgNameInReports', $('#OrgNameInReports').val());
formData.append('CenterTypes', $('#CenterTypes').val());
formData.append('Users', $('#Users').val());
formData.append('Comments', $('#Comments').val());
formData.append('UserTypes', $('#UserTypes').val());
jQuery.each($('#profile-img')[0].files, function (i, file) {
formData.append('picture-' + i, file);
});
$.ajax({
url: 'SettingPages/OrgManagmentService.asmx/SaveNewOrgManager',
type: 'POST',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
beforeSend: function () {
Preloader();
},
complete: function (data) {
RemovePreloader();
},
success: function (data, status) {
data = JSON.stringify(data);
console.log(data);
},
error: function (data, status,e) {
alert(status);
}
});