Javascript 使用Ajax将数据和文件以一种形式上传?
我在表单中使用jQuery和Ajax来提交数据和文件,但我不确定如何在一个表单中同时发送数据和文件 我目前对这两种方法的处理方式几乎相同,但将数据收集到数组中的方式不同,数据使用Javascript 使用Ajax将数据和文件以一种形式上传?,javascript,jquery,ajax,forms,Javascript,Jquery,Ajax,Forms,我在表单中使用jQuery和Ajax来提交数据和文件,但我不确定如何在一个表单中同时发送数据和文件 我目前对这两种方法的处理方式几乎相同,但将数据收集到数组中的方式不同,数据使用.serialize()但是文件使用=newformdata($(this)[0]) 是否可以将这两种方法结合起来,通过Ajax以一种形式上传文件和数据 数据jQuery、Ajax和html $("form#data").submit(function(){ var formData = $(this).ser
.serialize()
但是文件使用=newformdata($(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>
$("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>
$(“表单数据”).submit(函数(){
var formData=$(this.serialize();
$.ajax({
url:window.location.pathname,
键入:“POST”,
数据:formData,
async:false,
成功:功能(数据){
警报(数据)
},
cache:false,
contentType:false,
processData:false
});
返回false;
});
提交
文件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>
$("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>
$(“表单文件”).submit(函数(){
var formData=新formData($(此)[0]);
$.ajax({
url:window.location.pathname,
键入:“POST”,
数据:formData,
async:false,
成功:功能(数据){
警报(数据)
},
cache:false,
contentType:false,
processData:false
});
返回false;
});
提交
如何将上述内容结合起来,以便通过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>
短版
$("form#data").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.post($(this).attr("action"), formData, function(data) {
alert(data);
});
});
或更短:
$("form#data").submit(function() {
var formData = new FormData(this);
$.post($(this).attr("action"), formData, function() {
// success
});
return false;
});
另一个选项是使用iframe并将表单的目标设置为它
您可以尝试以下方法(它使用jQuery):
函数ajax\u表单($form,on\u complete)
{
var-iframe;
if(!$form.attr('target'))
{
//为表单创建唯一的iframe
iframe=$(“”).attr($('name','ajax_form_u'+Math.floor(Math.random()*99999)).hide().appendTo($('body');
$form.attr('target',iframe.attr('name');
}
如果(完成时)
{
iframe=iframe | |$('iframe[name=“”+$form.attr('target')+“]”);
iframe.load(函数()
{
//获取服务器响应
var response=iframe.contents().find('body').text();
完成时(响应);
});
}
}
它适用于所有浏览器,您不需要序列化或准备数据。
一个不利的方面是你不能监控进度
另外,至少对于chrome,请求不会出现在开发者工具的“xhr”选项卡中,而是出现在“doc”下我在ASP.Net MVC和HttpPostedFilebase中遇到了同样的问题,我需要使用按钮单击我需要做一些事情的地方,然后如果一切正常,提交表单就是这样工作的
$(".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; }
}
公共类MyViewModel
{
公共HttpPostedFileBase[]上载文件{get;set;}
}
对于我来说,下面的代码工作
$(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);
});
在Action Post方法中,将参数作为HttpPostedFileBase UploadFile传递,并确保文件输入与Action方法的参数中提到的相同。
它也应该与AJAX Begin表单一起使用
请记住,您的AJAX BEGIN表单在这里不起作用,因为您在上面提到的代码中定义了post调用,并且您可以根据需要在代码中引用您的方法
我知道我回答晚了,但这对我来说很有效
<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>
提交
$(文档)。在“单击”上,“提交”,功能(e){
//防止即时点击
e、 预防默认值();
//创建FormData对象
var formData=$(“#form”).submit(函数(e){
回来
});
//formData[0]仅包含表单数据
//您可以通过使用表单id直接创建对象,但它需要在$(“表单”).submit()中执行所有ajax操作
var formData=新formData(formData[0]);
$.ajax({
url:$('#form').attr('action'),
键入:“POST”,
数据:formData,
成功:功能(响应){
控制台日志(响应);
},
contentType:false,
processData:false,
缓存:false
});
返回false;
});
/////otherpage.php
<?php
print_r($_FILES);
?>
对我来说,如果Ajax请求中没有enctype:“multipart/form data”
字段,它就无法工作。我希望它能帮助陷入类似问题的人
尽管表单属性中已经设置了enctype
,但由于某种原因,Ajax请求在没有明确声明的情况下不会自动识别enctype
(jQuery 3.3.1)
//经过测试,这对我有用(jQuery 3.3.1)
提交(函数(e){
e、 预防默认值();
$.ajax({
键入:“POST”,
url:$(this.attr('action'),
enctype:“多部分/表单数据”,
数据:新表单数据(本),
processData:false,
contentType:false,
成功:功能(数据){
console.log('感谢上帝它成功了!');
}
}
);
});
//表单中设置了enctype字段,但默认情况下Ajax请求未设置该字段。
...
如上所述,请特别注意contentType
和processData
字段。在我的情况下,我必须发出POST请求,通过
// 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: "application/octet-stream",
enctype: 'multipart/form-data',
contentType: false,
processData: false,
data: formData,
var file = document.getElementById('uploadedFile').files[0];
var form = $('form')[0];
var formData = new FormData(form);
formData.append("File", file);
let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)
let formData = new FormData()
var d = $('#fileid')[0].files[0]
formData.append('fileid', d);
formData.append('inputname', value);
$.ajax({
url: '/yourroute',
method: 'POST',
contentType: false,
processData: false,
data: formData,
success: function(res){
console.log('successfully')
},
error: function(){
console.log('error')
}
})