Я использую jQuery и Ajax для своих форм для отправки данных и файлов, но я не уверен, как отправлять данные и файлы в одной форме?
В настоящее время я делаю почти то же самое с обоими методами, но способ, которым данные собираются в массив, отличается, данные используют .serialize();
, но файлы используют = new FormData($(this)[0]);
Можно ли комбинировать оба метода для загрузки файлов и данных в одной форме через Ajax?
Данные jQuery, Ajax и html
$("form#data").submit(function(){
var formData = $(this).serialize();
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="data" method="post">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<button>Submit</button>
</form>
Файлы jQuery, Ajax и html
$("form#files").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="files" method="post" enctype="multipart/form-data">
<input name="image" type="file" />
<button>Submit</button>
</form>
Как я могу объединить выше, чтобы я мог отправлять данные и файлы в одной форме через Ajax?
Моя цель - отправить эту форму в одном сообщении с помощью Ajax, возможно ли это?
<form id="datafiles" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>
У меня была проблема с неправильным идентификатором jQuery.
Вы можете загружать данные и файлы с помощью одной формы с помощью ajax.
PHP + HTML
<?php
print_r($_POST);
print_r($_FILES);
?>
<form id="data" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>
jQuery + Ajax
$("form#data").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
Краткая версия
$("form#data").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.post($(this).attr("action"), formData, function(data) {
alert(data);
});
});
другой вариант - использовать iframe и установить для него целевой объект формы.
вы можете попробовать это (он использует jQuery):
function ajax_form($form, on_complete)
{
var iframe;
if (!$form.attr('target'))
{
//create a unique iframe for the form
iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));
$form.attr('target', iframe.attr('name'));
}
if (on_complete)
{
iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');
iframe.load(function ()
{
//get the server response
var response = iframe.contents().find('body').text();
on_complete(response);
});
}
}
он хорошо работает со всеми браузерами, вам не нужно сериализовывать или готовить данные. одна из них - это то, что вы не можете следить за прогрессом.
также, по крайней мере, для хрома, запрос не будет отображаться на вкладке "xhr" инструментов разработчика, но в разделе "doc",
Или короче:
$("form#data").submit(function() {
var formData = new FormData($(this)[0]);
$.post($(this).attr("action"), formData, function() {
// success
});
return false;
});
У меня была такая же проблема в ASP.Net MVC с HttpPostedFilebase, и вместо использования формы на Submit мне нужно было использовать кнопку на клике, где мне нужно было что-то делать, а затем, если все ОК, отправьте форму, вот как я ее работаю
$(".submitbtn").on("click", function(e) {
var form = $("#Form");
// you can't pass Jquery form it has to be javascript form object
var formData = new FormData(form[0]);
//if you only need to upload files then
//Grab the File upload control and append each file manually to FormData
//var files = form.find("#fileupload")[0].files;
//$.each(files, function() {
// var file = $(this);
// formData.append(file[0].name, file[0]);
//});
if ($(form).valid()) {
$.ajax({
type: "POST",
url: $(form).prop("action"),
//dataType: 'json', //not sure but works for me without this
data: formData,
contentType: false, //this is requireded please see answers above
processData: false, //this is requireded please see answers above
//cache: false, //not sure but works for me without this
error : ErrorHandler,
success : successHandler
});
}
});
это будет, чем правильно заполнить вашу модель MVC, пожалуйста, убедитесь, что в вашей модели свойство для HttpPostedFileBase [] имеет то же имя, что и имя элемента управления ввода в html, т.е.
<input id="fileupload" type="file" name="UploadedFiles" multiple>
public class MyViewModel
{
public HttpPostedFileBase[] UploadedFiles { get; set; }
}
contentType : "application/octet-stream"
Для меня это не работает без enctype: 'multipart/form-data'
в запросе Ajax. Я надеюсь, что это помогает кому-то, кто застрял в аналогичной проблеме.
Несмотря на то, что enctype
уже был установлен в атрибуте формы, по какой-то причине запрос Ajax не идентифицировал enctype
автоматически без явного объявления (jQuery 3.3.1).
// Tested, this works for me (jQuery 3.3.1)
fileUploadForm.submit(function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
enctype: 'multipart/form-data',
data: new FormData(this),
processData: false,
contentType: false,
success: function (data) {
console.log('Thank God it worked!');
}
}
);
});
// enctype field was set in the form but Ajax request didn't set it by default.
<form action="process/file-upload" enctype="multipart/form-data" method="post" >
<input type="file" name="input-file" accept="text/plain" required>
...
</form>
Как уже упоминалось выше, обратите также особое внимание на contentType
и processData
.
Вы также можете использовать что-то вроде https://uppy.io. Он выполняет загрузку файлов без перехода со страницы и предлагает несколько бонусов, таких как перетаскивание, возобновление загрузки в случае сбоя браузера/нестабильных сетей и импорт, например, из Instagram. Он с открытым исходным кодом и не зависит от jQuery/React/Angular/Vue, но может использоваться с ним. Полное раскрытие: как его создатель я предвзят;)
Для меня следующая работа кода
$(function () {
debugger;
document.getElementById("FormId").addEventListener("submit", function (e) {
debugger;
if (ValidDateFrom()) { // Check Validation
var form = e.target;
if (form.getAttribute("enctype") === "multipart/form-data") {
debugger;
if (form.dataset.ajax) {
e.preventDefault();
e.stopImmediatePropagation();
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.onreadystatechange = function (result) {
debugger;
if (xhr.readyState == 4 && xhr.status == 200) {
debugger;
var responseData = JSON.parse(xhr.responseText);
SuccessMethod(responseData); // Redirect to your Success method
}
};
xhr.send(new FormData(form));
}
}
}
}, true);
});
В своем методе действия, передайте параметр как HttpPostedFileBase UploadFile и убедитесь, что ваш ввод файла совпадает с указанным в вашем параметре метода действий. Он также должен работать с формой AJAX Begin.
Помните здесь, что ваша форма AJAX BEGIN не будет работать здесь, так как вы делаете свой пост-вызов определенным в коде, упомянутом выше, и вы можете ссылаться на свой метод в коде в соответствии с требованием
Я знаю, что я отвечаю поздно, но это то, что сработало для меня
<form id="form" method="post" action="otherpage.php" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button type='button' id='submit_btn'>Submit</button>
</form>
<script>
$(document).on("click","#submit_btn",function(e){
//Prevent Instant Click
e.preventDefault();
// Create an FormData object
var formData =$("#form").submit(function(e){
return ;
});
//formData[0] contain form data only
// You can directly make object via using form id but it require all ajax operation inside $("form").submit(<!-- Ajax Here -->)
var formData = new FormData(formData[0]);
$.ajax({
url: $('#form').attr('action'),
type: 'POST',
data: formData,
success: function(response) {console.log(response);},
contentType: false,
processData: false,
cache: false
});
return false;
});
</script>
/////otherpage.php
<?php
print_r($_FILES);
?>
FormData
должен хорошо работать с формами, которые содержат все, что вы хотите, а не только поля загрузки файла; это не широко поддерживается, хотя.