使用 FormData 提交表单并呈现带有验证错误的表单答案

【问题标题】：Submit form using FormData and render form with validation errors使用 FormData 提交表单并呈现带有验证错误的表单
【发布时间】：2015-02-02 13:46:06
【问题描述】：

我在 Rails 应用程序中有一个创建新 Car 记录的表单。因为我希望用户能够选择并上传图像文件，然后将它们与表单一起提交，所以我将使用 HTML5 FormData 对象在表单提交时提交数据，Coffeescript 如下所示：

filesArray = new Array()

$(document).on 'change', '.file-fields .file-field', () ->

    if @files and @files[0]

        file = @files[0]
        imageType = /image.*/

        if file.type.match(imageType)

            filesArray.push(file)

    return

$(document).on 'submit', '#car-form', (e) ->

    e.preventDefault()

    formData = new FormData(document.getElementById("car-form"))
    i = 0

    while i < filesArray.length
        file = filesArray[i]
        formData.append "photos[]", file, file.name
        i++

    $.ajax '/cars',
        type: "POST"
        data: formData
        processData: false
        contentType: false

    return

但我希望表单仍然像同步提交一样运行，以便 Rails 执行验证并在验证失败时呈现带有错误消息的表单。目前，我的CarsController 有一个create 操作，如下所示：

def create

    @car = current_user.cars.build(car_params)

    respond_to do |format|
      if @car.save

        format.html { redirect_to @car, notice: 'Car was successfully created.' }
        format.json { render :show, status: :created, location: @car }
      else
        format.html { render :new }
        format.json { render json: @car.errors, status: :unprocessable_entity }
      end
    end
  end

我正在使用 FormData 提交图像，而不是直接通过表单发送，以便我可以处理图像预览。

当我提交表单时，参数被传递给CarsController#create 操作并触发一些before_action 过滤器。但是表单上什么也没有发生，它没有重新加载，也没有出现验证。

Processing by CarsController#create as */*
  Parameters: {"utf8"=>"✓", ...
  Rendered cars/_form.html.erb (60.8ms)
  Rendered cars/new.html.erb within layouts/application (62.9ms)
Completed 200 OK in 746ms (Views: 640.5ms | ActiveRecord: 1.8ms)

我应该如何设置表单、控制器和 Javascript，以使我的表单表现得好像是同步提交的，但不正确的数据会出现验证错误？

【问题讨论】：

只是旁注。某些 IE 版本存在错误（例如我的；IE10/11 区域荷兰语）。 file.type 在图像上返回一个空字符串。只是为了让您知道。
您不需要 Ajax 请求来发送文件。只需将表单的enctype 设置为multipart/form-data 并将method 设置为post。在文件输入上设置属性multiple。
我正在表单上实现图像预览。所以我想将用户选择的图像存储在一个数组中，然后在用户提交表单时将该数组与其余的表单数据一起发送。
我明白了。那很好。我喜欢 HTML5。现在提交ajax时会发生什么，返回什么？
我用服务器日志更新了问题。当我提交表单时，它似乎没有重新加载任何内容，但日志显示 cars/_form.html.erb 和 cars/new.html.erb 已呈现，所以我认为它们可能是异步呈现的。但是没有验证。

标签： javascript ruby-on-rails coffeescript form-data

【解决方案1】：

示例表格：

   <form class="file-fields" enctype="multipart/form-data" method="post">
        <input class="file-field" type="file" multiple />
        <button type="submit">Upload</button>
   </form>

CoffeeScript：

$(document).on 'submit', '#car-form', (e) ->

    fileInput = $('.file-fields .file-field')[0]
    for i = 0 i < fileInput.length i++
        file = @files[i]
        imageType = /image.*/

        if !file.type.match(imageType)
            return false

    return true

这会检查输入是否有图像。如果一个不正确，则提交失败。否则提交并让 Rails 接管。

【讨论】：