Question

我在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，以便我的表单行为就像与错误数据的验证错误同步提交一样？

Answer 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接管。

使用FormData提交表单并使用验证错误呈现表单

1 个答案: