使用铆钉js绑定输入类型文件

Question

我正在使用Rivets 绑定我的表单数据。有什么方法可以将我的输入类型文件与帮助铆钉粘合剂绑定。

就像这个例子https://jsfiddle.net/steinbring/v29vnLuh/你可以看到我们绑定了文本区域。但是我们将如何绑定输入文件。

让我解释一下

这是我的表格

<form class="product-inputs full-width-inputs" method="post" action="/create/save-manual-products-shopify">
            <section id="rivettest">
                <ul class="no-bullet">
                    <li class="product-input-header">
                        <div class="row no-padding">
                            <div class="small-2 columns">
                                <p>Product Name</p>
                            </div>
                            <div class="small-2 columns">
                                <p>Product Detail</p>
                            </div>
                            <div class="small-2 columns">
                                <p>Product Type</p>
                            </div>
                            <div class="small-2 columns">
                                <p>Price</p>
                            </div>
                            <div class="small-2 columns floatleft">
                                <p>Sku</p>
                            </div>
                            <div class="small-2 columns floatleft">
                                <p>Image</p>
                            </div>
                        </div>
                    </li>
                    <li class="product-input" rv-each-product="products">
                        <div class="row no-padding">
                            <div class="small-2 columns" style="position: relative">
                                <input class="product-name-input" type="text" rv-value="product.name" placeholder="New Product"/>
                                <span class="icon-error remove-btn" rv-on-click="controller.removeItem"></span>
                            </div>
                            <div class="small-2 columns">
                                <input type="text" rv-value="product.product_detail"/>
                            </div>
                            <div class="small-2 columns">
                                <input type="text" rv-value="product.product_type"/>
                            </div>
                            <div class="small-2 columns">
                                <input type="text" rv-value="product.price">
                            </div>
                            <div class="small-2 columns">
                                <input type="text" rv-value="product.sku">
                            </div>
                             <div class="small-2 columns">
                                <input type="file" rv-value="product.image">
                                <!-- <input type="file"> -->
                                <!-- <a href="#"><span class="icon-upload"></span> Upload Image</a> -->
                            </div>
                        </div>
                    </li>
                    <li class="additem">
                        <a href="#" rv-on-click="controller.addItem"><span class="icon-plus"></span>Add Product Manually</a>
                    </li>
                </ul>
            </section>
                <input type="submit" value="Submit for KF Approval" class="button radius add-product-shopify" >
            </form>

这是我的脚本

   var products = [];
var controller = {
    addItem: function(e, model) {
        model.products.push({name: "New Product", product_detail: "", product_type: "", price: null, sku: null, image: ""});
        e.preventDefault();
        return false;
    },

    removeItem: function(e, model) {
        var index = model.index;
        if (index > -1) {
            products.splice(index, 1);
        }
    },

};
rivets.bind($('#rivettest'), {products: products, controller: controller});

但是当我提交表单时，我得到了这个回复

图片：“” 名称：“一” 价格：“12” 产品详细信息：“b” 产品类型：“c” 货号：“12”

在这里你看到图像参数是空的......请帮助我。谢谢

Answer 1

这是一个用 coffescript 编写的工作示例

controller = (el, data) ->

  that = this
  @email_valid = false

  @update = ->
    if @type == "file"
      data[@id] = @files[0]
    else
      data[@id] = @value

  @submit = ->
    _data = new FormData()
    Object.keys(data).forEach( (key) ->
      _data.append(key, data[key])
      )
    req = new XMLHttpRequest()
    req.open('POST', 'addUser', true)
    req.onreadystatechange = (aEvt) ->
      if req.readyState == 4
        if req.status == 200
          return req.responseText
        else
          return "Erreur pendant le chargement de la page.\n"
    req.send(_data)

  @email_validate = ->
    re = /\S+@\S+\.\S+/
    return re.test data.email

  return this

rivets.components['user'] = {
  # Return the template for the component.
  template: ->
    return tpl

  # Takes the original element and the data that was passed into the
  # component (either from rivets.init or the attributes on the component
  # element in the template).
  initialize: (el, data) ->
    return new controller(el, data)
  }

表格

<form enctype="multipart/form-data" class="form-horizontal" id="userForm">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- File Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="picture">Photo</label>
  <div class="col-md-4">
    <input rv-value="picture" rv-on-change="update" id="picture" name="picture" class="input-file" type="file">
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Name</label>
  <div class="col-md-4">
  <input rv-value="name" id="name" rv-on-input="update" name="name" type="text" placeholder="Name" class="form-control input-md">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="password">Password</label>
  <div class="col-md-4">
  <input rv-value="password" id="password" rv-on-input="update" name="password" type="text" placeholder="Password" class="form-control input-md">
  </div>
</div>
<!-- Password input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="password-validate">Password Validate</label>
  <div class="col-md-4">
    <input rv-value="password-validate" rv-on-input="update" id="password-validate" name="password-validate" type="password" placeholder="Password" class="form-control input-md">

  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="save">Save</label>
  <div class="col-md-4">
    <button type="button" rv-on-click="submit" id="save" name="save" class="btn btn-primary">Save</button>
  </div>
</div>

</fieldset>
</form>

和服务器端

multipart = require('connect-multiparty');
multipartMiddleware = multipart();

app.post '/addUser', multipartMiddleware, (req, resp) ->
  console.log(req.body, req.files)

Answer 2

您需要设置表单以允许使用enctype 属性上传文件。

<form enctype="multipart/form-data">

Answer 3

您可以尝试将 onchange 事件绑定到文件输入：

<input type="file" rv-on-change="update" rv-value="product.image">

并在您的控制器中创建一个更新方法，用 form 的值更新 product.image 值。

  this.update = function(){
    model[this.id] = this.value
   }