9

Minha duvida é a seguinte: Eu consigo passar para o controller OU o arquivo OU o formulário. Eu queria saber se existe algum tipo (igual FormCollection, porém este aparentemente só recebe o formulário em si, os arquivos postados juntos não) que receba tanto o formulário quanto o arquivo em um POST só. Já pesquisei informações a respeito mas sempre é enviado o arquivo sozinho, e eu queria enviar junto com o formulário.

HTML

<input type="text" name="nome"/>
<input type="text" name="Sobrenome"/>
<input type="file" id="FileUpload1" /> &nbsp;
<button id="btnEnviarArquivo" style="margin left:-6px;">Enviar Arquivo</button>
<button type="button" id="Enviar">Enviar</button>

Javascript

$.ajax({
    url: "/Home/Cadastro",
    type: "POST",
    data: data,
    success: function (data) {

    }

});

Controller

public JsonResult Cadastro(FormCollection form)
{
     return Json(new {});
}

3 Respostas 3

4

Você precisará implementar requisições do tipo Multipart, parte da especificação HTTP 1.1.

Para fins de demonstração, eu criei o seguinte webform, contendo campos de texto e um fileupload:

<%@ Page Language="C#" (...)%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </form>
</body>
</html>

Cuja aparência, quando visualizado no Chrome, é a seguinte:

inserir a descrição da imagem aqui

Eu interceptei o payload via Wireshark. Esta é a requisição enviada para o servidor:

POST /script/OpCenter/samplewebpart.aspx HTTP/1.1
Host: [SERVER].[DOMAIN]
Connection: keep-alive
Content-Length: 12373
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://[SERVER].[DOMAIN]
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryCYhgqEfRdnZkrdRf
Referer: http://[SERVER].[DOMAIN]/script/OpCenter/samplewebpart.aspx
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,pt;q=0.6

------WebKitFormBoundaryCYhgqEfRdnZkrdRf
Content-Disposition: form-data; name="__VIEWSTATE"
/wEPDwULLTEwNjc5MDgzOTQPZBYCAgMPFgIeB2VuY3R5cGUFE211bHRpcGFydC9mb3JtLWRhdGFkZOW8eX8I0G+ceXPjDwfXA1MRJuxEFHvp1y5twOS3H9uw

------WebKitFormBoundaryCYhgqEfRdnZkrdRf
Content-Disposition: form-data; name="__EVENTVALIDATION"

/wEWAwLQ+p/sDwLs0bLrBgKM54rGBqByybWBtQAZmIHlcbrUlcixkQ/+JlgNypmZ4vFxAn6b
------WebKitFormBoundaryCYhgqEfRdnZkrdRf
Content-Disposition: form-data; name="TextBox1"

teste
------WebKitFormBoundaryCYhgqEfRdnZkrdRf
Content-Disposition: form-data; name="FileUpload1"; filename="Alert.png"
Content-Type: image/png

.PNG
....IHDR.............\r.f....gAMA....7.......tEXtSoftware.Adobe ImageReadyq.e<..,.IDATx..}y..wu......5..4:,....,..O..l.M.......q..5.\.%......;$..
(mais ou menos 12Kb depois...)
.f....`0...^..`0.0..&......`0.........`.`0.L.......`0.0..&......`0....F....0.p9.Xd..F....IEND.B`.

------WebKitFormBoundaryCYhgqEfRdnZkrdRf
Content-Disposition: form-data; name="Button1"

Button
------WebKitFormBoundaryCYhgqEfRdnZkrdRf--

(Perceba que mesmo os campos escondidos de controle de estado do ASP.NET, __VIEWSTATE e __EVENTVALIDATION, estão presentes no conteúdo multipart.)

Isso dito, vamos à solução do lado client usando jQuery e Ajax:

1) Prepare os dados a serem enviados, empacotando-os em uma instância da classe FormData

var data = new FormData();
jQuery.each($('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

(Inclua, neste momento, todos os dados que precisar, incluindo os presentes no formulário, via data.append.)

2) Realize sua chamada Ajax, passando a instância de FormData como parâmetro:

$.ajax({
    url: 'paginadestino.aspx',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

Referências:

Esta é uma maneira de implementar Multipart do lado client em uma chamada Ajax (resposta aceita.)

Este post tem um exemplo de como tratar multipart do lado do servidor (em C#).

(As referências estão em inglês.)

1
  • 1
    E o tratamento no servidor como seria? Commented 24/07/2014 às 20:17
0

Essa é uma duvida que já tive há tempos atrás e pesquisando cheguei as seguintes respostas/conclusões:

Até onde meu conhecimento vai, atualmente a resposta é não, não é possível enviar dados de um formulário e um arquivo em uma mesma requisição para o servidor.

Digo atualmente, por que atualmente estamos utilizando HTTP 1.1 (que é de 1995/1996), que não suporte esse tipo de requisição. Mas SPDY (by Google) e HTTP 2.0 (que é o novo padrão HTTP em desenvolvimento, e é baseado no SPDY), pretendem resolver essas limitações do HTTP 1.1.

Mas apesar de já haverem servidores implementando esses novos padrões HTTP. Na garantem que esse tipo de suporte será mantido na versão final.

3
  • HTTP 1.1 suporta Content-Type: multipart/*, que seria em teoria o que ele precisa.
    – OnoSendai
    Commented 24/07/2014 às 17:55
  • @OnoSendai, oohh, estava torcendo para ser desmentido, mas Content-Type multipart/* permite enviar uma imagem e um form em uma mesma requisição? E o servidor irá saber processar isso de forma fácil. Ou terá que ler toda a requisição de forma manual? Aguardarei sua resposta e depois removerei minha resposta (se for comprovada incorreta). Commented 24/07/2014 às 18:08
  • Resposta atualizada!
    – OnoSendai
    Commented 24/07/2014 às 19:41
0

Sim existe, para demostração fiz algumas alterações no seu form igual nas figuras ilustrativas logo abaixo, e os exemplos são para WebForms e MVC ASP.NET.

1 - MVC

View:

@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Upload</title>
    <script src="~/Scripts/jquery-2.1.1.js"></script>
</head>
<body>
    <form name="Form1" id="Form1">
        <label>Nome:</label>
        <input type="text" name="nome" id="nome" /><br />
        <label>Sobrenome:</label>
        <input type="text" name="sobrenome" id="sobrenome" /><br />
        <label>Arquivo:</label>
        <input type="file" id="fileupload" /><br />        
        <button type="button" id="Enviar">Enviar</button>
    </form>
    <script>
        $(function () {
            $("#Enviar").on("click", function () {
                var form = new FormData();
                $.each($("#Form1 #fileupload")[0].files, function(idx, file){
                    form.append("FileUpload", file);
                });
                form.append('Nome', $("#nome").val());
                form.append('SobreNome', $("#sobrenome").val());
                $.ajax({
                    url: '@Url.Action("Upload")',
                    data: form,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function (data) {
                        alert(data);
                    }
                });
            });
        });
    </script>
</body>
</html>

Action Result:

public ActionResult Upload()
{
    return View();
}

[HttpPost]
public ActionResult Upload(String Nome, String SobreNome, HttpPostedFileBase FileUpload)
{
    return View();
}

Resultado esperado:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui


2 - WebForms

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Upload.aspx.cs" Inherits="WebApplicationForms.Upload" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Upload</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
</head>
<body>
    <form id="Form1" runat="server">
        <label>Nome:</label>
        <input type="text" name="nome" id="nome" /><br />
        <label>Sobrenome:</label>
        <input type="text" name="sobrenome" id="sobrenome" /><br />
        <label>Arquivo:</label>
        <input type="file" id="fileupload" /><br />
        <button type="button" id="Enviar">Enviar</button>
        <script>
            $(function () {
                $("#Enviar").on("click", function () {
                    var form = new FormData();
                    $.each($("#Form1 #fileupload")[0].files, function (idx, file) {
                        form.append("FileUpload", file);
                    });
                    form.append('Nome', $("#nome").val());
                    form.append('SobreNome', $("#sobrenome").val());
                    $.ajax({
                        url: 'Upload.ashx',
                        data: form,
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: 'POST',
                        success: function (data) {
                            alert(data.Ok);
                        }
                    });
                });
            });
        </script>
    </form>
</body>
</html>

Arquivo Upload.ashx (handler):

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplicationForms
{    
    public class Upload1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            String Nome = context.Request.Form["Nome"].ToString();
            String SobreNome = context.Request.Form["SobreNome"].ToString();
            HttpPostedFile FileUpload = context.Request.Files["FileUpload"];

            context.Response.Clear();
            context.Response.ContentType = "application/json";
            context.Response.Flush();
            context.Response.Write(JsonConvert.SerializeObject(new {Ok = true}));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Resultado esperado:

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .