我正在使用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});
但是当我提交表格时，我得到了这个回复
图片：＆＃34;＆＃34; 名称：＆＃34; a＆＃34; 价格：＆＃34; 12＆＃34; product_detail：＆＃34; b＆＃34; product_type：＆＃34; c＆＃34; sku：＆＃34; 12＆＃34;
在这里你看到图片参数是空的...请帮帮我。谢谢
答案 0 :(得分：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)
答案 1 :(得分：0)
您需要将表单设置为允许使用enctype属性上传文件。
<form enctype="multipart/form-data">
答案 2 :(得分：0)
您可以尝试将onchange事件绑定到文件输入：
<input type="file" rv-on-change="update" rv-value="product.image">
并在控制器中创建一个更新方法，使用form的值更新product.image值。
this.update = function(){
model[this.id] = this.value
}