通过BlueImp FileUpload jQuery插件使用ReactJS上载文件
这是ReactJS的新手。
有谁可以建议使用什么或者如何在React中上传一个表单(有几个输入框和一个文件选择器)？
一直在尝试使用BlueImp JQuery-file-upload plugin让我伤脑筋。这些错误消息很隐秘，并且没有成功地从谷歌获得任何有用的帮助。
我的代码如下：
<form id="myForm" enctype="multipart/form-data" onSubmit={this.handleSubmit}>
<input type="text" name="name">
<input type="text" name="lastName">
<input type="file" accept="image/*" name="myPic">
</form>
// Inside handleSubmit() of my component
$('#myForm").fileupload('add', {url: "myurl"});谢谢!
回答 5
Stack Overflow用户
发布于 2014-03-06 00:42:41
在React中使用jQuery插件是合理的，但是因为React保留了自己的DOM的虚拟表示，所以您应该避免使用jQuery选择器。
在提交表单时，使用事件目标获取对实际DOM节点的引用，并将其包装在jQuery对象中以访问插件：
React.createClass({
handleSubmit: function(event) {
$(event.target).fileupload('add', {url: "myurl"});
},
render: function() {
return (
<form enctype="multipart/form-data" onSubmit={this.handleSubmit}>
<input type="text" name="name" />
<input type="text" name="lastName" />
<input type="file" accept="image/*" name="myPic" />
</form>
);
}
});Stack Overflow用户
发布于 2014-07-30 02:33:37
我尝试过BlueImp，但放弃了，我使用的是从here修改而来的解决方案：
/** @jsx React.DOM */
var FileForm = React.createClass({
getInitialState: function() {
return {data_uri: null}
},
handleSubmit: function() {
$.ajax({
url: url,
type: "POST",
data: this.state.data_uri,
success: function(data) {
// do stuff
}.bind(this),
error: function(xhr, status, err) {
// do stuff
}.bind(this)
});
return false;
},
handleFile: function(e) {
var reader = new FileReader();
var file = e.target.files[0];
reader.onload = function(upload) {
this.setState({
data_uri: upload.target.result
}, () => console.log(this.state.data_uri));
}.bind(this);
reader.readAsDataURL(file);
},
render: function() {
return (
<form onSubmit={this.handleSubmit} encType="multipart/form-data">
<input type="file" onChange={this.handleFile} />
<input type="submit" value="Submit />
</form>
);
}
});从那时起，您的端点应该能够处理它。
Stack Overflow用户
发布于 2014-10-14 17:53:32
要在ReactJS中使用BlueImp JQuery-file-upload插件，需要将replaceFileInput选项设置为false。这是因为当replaceFileInput为true (默认值)时，每次选择新文件时，BlueImp都会用新的输入元素替换文件输入元素。这是ReactJS不喜欢的。
从https://groups.google.com/d/msg/reactjs/lXUpL22Q1J8/-ibTaq-OJ6cJ了解到这一点
请参阅此处的replaceFileInput文档：https://github.com/blueimp/jQuery-File-Upload/wiki/Options#replacefileinput
https://stackoverflow.com/questions/21234106
复制相似问题