Привязать файл типа ввода с помощью заклепок JS
я использую заклепки связать мои данные формы. Есть ли способ привязать мой тип файла ввода с помощью заклепок.
Как в этом примере 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});
Но когда я отправляю свою форму, я получил этот ответ
image: «» name: «a» цена: «12» product_detail: «b» product_type: «c» sku: «12»
Здесь вы видите, что параметр изображения пуст … пожалуйста, помогите мне. Спасибо
Решение
Вот рабочий пример, написанный в 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)
Другие решения
Вам нужно настроить форму, чтобы разрешить загрузку файлов с помощью enctype приписывать.
<form enctype="multipart/form-data">
Вы можете попытаться привязать событие onchange к вводу файла:
<input type="file" rv-on-change="update" rv-value="product.image">
и создайте метод обновления в вашем контроллере, который обновит значение product.image значением формы.
this.update = function(){
model[this.id] = this.value
}