html表单中的文件上传字段不会发送到服务器答案

【问题标题】：File upload fields from html form aren't sent to serverhtml表单中的文件上传字段不会发送到服务器
【发布时间】：2014-07-16 17:20:23
【问题描述】：

在我当前的 spring 项目中，一些表单有字段供用户将图像文件上传到服务器。但是，当我使用浏览器 (Firefox) 的网络监视器检查哪些参数被发送到服务器时，我注意到文件上传字段没有发送到服务器（仅列出常规字段）。

我曾经知道只有具有name 属性的字段被发送到服务器，并且我确保这些字段具有此属性。表单的 html 代码与此类似：

    <form id="command" role="form" class="form" action="Categoria/cadastra" method="post" enctype="multipart/form-data">
    <fieldset>
    <div class="panel panel-default">
        <div class="panel-heading">
        </div>
        <div class="panel-body">
            <p>
            <label for="nome" class="form-control">nome</label>
            <input id="nome" name="nome" class="form-control" type="text" value=""/>
            </p>
        </div>
    </div>
        <div class="panel panel-default include">
            <div class="panel-heading">
                Selecione um arquivo de imagem para <i>capa da categoria</i>
            </div>
            <div class="panel-body">
                <input type="file" name="file" class="form-control"/>
            </div>
        </div>
    <p>
        <button type="submit" class="btn btn-lg btn-primary">Cadastrar</button>
    </p>
    </fieldset>
</form>

请求由我的控制器中的这个方法处理：

@RequestMapping(value="cadastra", method=RequestMethod.POST)
@ResponseBody
public String cadastrea(@ModelAttribute("object") E object, BindingResult result, @RequestParam(value="file", required=false) MultipartFile file) {
    if(serv.cadastra(object)) {
        if(serv.upload_picture(object, file))
            return "yes";
        else
            return "data";
    }
    else {
        return "not";
    }
}

现在，我使用 jquery 脚本来处理将请求发送到服务器的过程，接收响应并向用户显示一条消息，告诉用户处理结果。这是我正在使用的脚本：

$(document).on('submit', '.form', function (event) {
    event.preventDefault();

    var $form = $( this ),  url = $form.attr( "action" );
    var posting = $.post( url, $(this).serialize() );
    posting.done(function( data ) {
        var alert = $("#"+data); 
        alert.css("display", "block");
        alert.fadeOut(2500);
        $(".form").each(function(){
            this.reset();
        });
    });
});

有人告诉我，file 类型的字段不能使用 ajax 调用发送。这是真的？如果是，有没有其他方法可以在没有脚本的情况下做同样的事情（捕获来自服务器的响应并在同一页面中显示一条消息而不是重定向到另一个页面）？

【问题讨论】：

支持 XHR2 的浏览器可以进行 Ajax 文件上传，对于其他浏览器，您使用 iframe 作为表单目标。
@Musa 我尝试使用 firefox 和 chrome（最新版本）提交表单，并面临同样的问题。我该如何使用 iframe？
隐藏 iframe 示例 - stackoverflow.com/questions/16380997/… XHR2 示例 stackoverflow.com/questions/22425110/…

标签： jquery html ajax spring httprequest

【解决方案1】：

看看jqueryform 插件。我相信他们通过将上传的文件包装在隐藏的 iframe 中并使用 ajaxSubmit 函数传递它来解决这个问题。

类似

$('#yourForm').ajaxSubmit({
type: 'POST',
url: 'yourUrl'
});

应该做的伎俩。在您的控制器中，您将查看 HttpContext.Current.Request.Files 并处理该集合中的项目。

【讨论】：