Javascript AJAX将包含数据和多个图像的表单发送到asp.net mvc操作
已经两天了。我一直在网上搜索,但我想不出解决办法 我有一些输入字段,可以在其中插入文本和选择图像。它们是可变的,这意味着如果您想要更多的字段来添加更多的产品,您可以单击“+”并添加另一个字段集 当我点击“Salva e Prosegui”并将所有数据传递给控制器中的ASP.MVC操作时 我尝试了不同的方法,但我无法传递图像 HTML: 我的逻辑是: 我得到了我有多少个字段集,对于每个字段集,我得到了值并调用服务器进行上传。对于每个字段集,我有2个文本输入,2个文件输入。我还必须将ID传递给第三个文本字段Javascript AJAX将包含数据和多个图像的表单发送到asp.net mvc操作,javascript,jquery,asp.net,ajax,asp.net-mvc,Javascript,Jquery,Asp.net,Ajax,Asp.net Mvc,已经两天了。我一直在网上搜索,但我想不出解决办法 我有一些输入字段,可以在其中插入文本和选择图像。它们是可变的,这意味着如果您想要更多的字段来添加更多的产品,您可以单击“+”并添加另一个字段集 当我点击“Salva e Prosegui”并将所有数据传递给控制器中的ASP.MVC操作时 我尝试了不同的方法,但我无法传递图像 HTML: 我的逻辑是: 我得到了我有多少个字段集,对于每个字段集,我得到了值并调用服务器进行上传。对于每个字段集,我有2个文本输入,2个文件输入。我还必须将ID传递给第三
提前感谢您。感谢darloopkat。我找到了一个办法 以下是我的编辑: js:
在最近的一个项目中,我使用Dropzone.js来实现这一点。它工作正常,看起来很好。此外,您不需要有多个文件上载控件。谢谢,但我认为这无助于将数据和图像传递给控制器。我真的觉得你的Ajax调用应该是通过POST not GET发送文件,这是默认设置。在控制器操作中,您需要将[HttpPost]添加到标头(在“public”之前)。要在操作方法中获取上载的文件,请使用Request.files。无需声明请求。感谢您的帮助。我找到了路。我将发布解决方案。
<div class="fields-container">
<div class="row">
<div class="col-md-2">
<input type="text" name="nomecolore" placeholder="Nome Colore" class="form-control" />
</div>
<div class="col-md-1">
<input type="text" name="codicecolore" placeholder="Codice Colore" class="form-control" />
</div>
<div class="col-md-4">
<input type="file" name="filefronte" class="form-control filestyle" data-text="Foto Fronte" data-btnClass="btn-primary form-control" data-buttonBefore="true">
</div>
<div class="col-md-4">
<input type="file" name="fileretro" class="form-control filestyle" data-text="Foto Retro" data-btnClass="btn-primary form-control" data-buttonBefore="true">
</div>
<div class="col-md-1">
<button class="btn btn-success add-more form-control" type="button"><i class="glyphicon glyphicon-plus"></i></button>
</div>
</div>
$('#step-2-next').click(function () {
var ListaNomiColori = $(".fields-container :input[name=nomecolore]");
var ListaCodiciColori = $(".fields-container :input[name=codicecolore]");
var ListaImmaginiFronte = $(".fields-container :input[name=filefronte]");
var ListaImmaginiRetro = $(".fields-container :input[name=fileretro]");
var ID_Prodotto = "1";
for (i = 0; i < ListaNomiColori.length; i++) {
var formData = new FormData();
var nome = ListaNomiColori[i].value;
var codice = ListaCodiciColori[i].value;
var fronte = ListaImmaginiFronte[i].files[0];
var retro = ListaImmaginiRetro[i].files[0];
formData.append("NomeColore", nome);
formData.append("CodiceColore", codice);
formData.append("Foto", fronte);
formData.append("Foto", retro);
formData.append("ID_Prodotto", ID_Prodotto);
$.ajax({
url: _NuovoProdottoCaricaModelli,
data: formData,``
processData: false,
contentType: false,
success: function (res) {
alert('succes!!');
},
error: function (res) {
alert("errror");
}
})
}
});
public JsonResult NuovoProdottoCaricaModelli(FormCollection form)
{
////code here
}
$('#step-2-next').click(function () {
var ListaNomiColori = $(".fields-container :input[name=nomecolore]");
var ListaCodiciColori = $(".fields-container :input[name=codicecolore]");
var ListaImmaginiFronte = $(".fields-container :input[name=filefronte]");
var ListaImmaginiRetro = $(".fields-container :input[name=fileretro]");
var ID_Prodotto = "1";
for (i = 0; i < ListaNomiColori.length; i++) {
var formData = new FormData();
var nome = ListaNomiColori[i].value;
var codice = ListaCodiciColori[i].value;
var fronte = ListaImmaginiFronte[i].files[0];
var retro = ListaImmaginiRetro[i].files[0];
formData.append("NomeColore", nome);
formData.append("CodiceColore", codice);
formData.append("Foto", fronte);
formData.append("Foto", retro);
formData.append("ID_Prodotto", ID_Prodotto);
$.ajax({
url: _NuovoProdottoCaricaModelli,
data: formData,
type: "POST",
processData: false,
contentType: false,
success: function (res) {
alert('succes!!');
},
error: function (res) {
alert("errror");
}
})
}
});
[HttpPost]
public ActionResult NuovoProdottoCaricaModelli()
{
string Nome = Request["NomeColore"];
string CodiceColore = Request["NomeColore"];
var Fronte = Request.Files[0];
var NomeFronte = Path.GetFileName(Fronte.FileName);
var Retro = Request.Files[1];
var NomeRetro = Path.GetFileName(Retro.FileName);
return Json("");
}