使用鉚釘綁定輸入類型文件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}); 

但是，當我提出我的形式我得到這個響應

圖像：「」 名稱：「a」 價格：「12 「 product_detail：‘B’ 產品類型：‘C’ SKU：‘12’

這裏可以看到，圖片參數是空的......請大家幫幫我.Thanks

Answer 1

您需要將表格設置爲允許使用enctype屬性進行文件上載。

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

Answer 2

你可以嘗試綁定一個onchange事件到文件輸入：

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

，並創建在您的控制器的更新方法更新形式的價值product.image值。

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

Answer 3

這裏有一個工作的例子寫在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)