Javascript 在reactjs中显示文件上载消息成功或失败
我使用Ajax调用在服务器中上传文件。所以我想显示成功和失败的消息,根据文件上传Javascript 在reactjs中显示文件上载消息成功或失败,javascript,ajax,twitter-bootstrap,reactjs,Javascript,Ajax,Twitter Bootstrap,Reactjs,我使用Ajax调用在服务器中上传文件。所以我想显示成功和失败的消息,根据文件上传 $.ajax({ url: "https:my_url", data: {my data: my_data}, method : "POST", success: function(result) { alert(result); }, error: function(error){ alert("Error in File Upload"); } }); 并
$.ajax({
url: "https:my_url",
data: {my data: my_data},
method : "POST",
success: function(result) {
alert(result);
},
error: function(error){
alert("Error in File Upload");
}
});
并在react组件中使用该组件
<input id="file-input" type="file" className="fileInput" onChange=
{this.myfile} multiple />
因此,请帮助我将消息打印为引导或任何好方法,即需要如下所示
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-
link">File uploaded </a>.
</div>
成功你应该这么做。
有一个CSS类不可见
如下
.invisible{
display:none;
}
然后有一个状态变量上传
,初始值为上传
this.state = {uploaded:'uploading'}
然后创建两条警报消息
<div className=`alert alert-success ${this.state.uploading === 'success'?'':'invisible'}`>
<strong>Success!</strong> You should <a href="#" class="alert-
link">File uploaded </a>.
<div className=`alert alert-danger ${this.state.uploading === 'failure'?'':'invisible'}`>
<strong>Failure!</strong> Failed <a href="#" class="alert-
link">File uploaded </a>.
</div>
ajax
调用设置this.state。根据ajax
调用的结果和显示的相应消息,将上载为成功或失败
对于ES5样式
var _this = this
$.ajax({
url: "https:my_url",
data: {my data: my_data},
method : "POST",
success: function (result) {
_this.setState({uploading:'success'})
},
error: function (error) {
_this.setState({uploading:'failure'})
}
});
像这样有一个CSS类不可见
.invisible{
display:none;
}
然后有一个状态变量上传
,初始值为上传
this.state = {uploaded:'uploading'}
然后创建两条警报消息
<div className=`alert alert-success ${this.state.uploading === 'success'?'':'invisible'}`>
<strong>Success!</strong> You should <a href="#" class="alert-
link">File uploaded </a>.
<div className=`alert alert-danger ${this.state.uploading === 'failure'?'':'invisible'}`>
<strong>Failure!</strong> Failed <a href="#" class="alert-
link">File uploaded </a>.
</div>
ajax
调用设置this.state。根据ajax
调用的结果和显示的相应消息,将上载为成功或失败
对于ES5样式
var _this = this
$.ajax({
url: "https:my_url",
data: {my data: my_data},
method : "POST",
success: function (result) {
_this.setState({uploading:'success'})
},
error: function (error) {
_this.setState({uploading:'failure'})
}
});
好的,我正在尝试实现,然后让您知道相同的。在控制台中获取错误并在屏幕中不显示提示消息:Uncaught TypeError:this.setState不是一个函数。您可以发布整个组件代码以便我可以查看吗?检查此链接并让我知道是否仍然需要有关代码的任何帮助哦,好的。错误发生的原因是成功
和错误
功能中的此
更改。您可以使用ES6样式的函数来删除错误。我将修改原始答案。对于ES5样式,您需要在另一个变量中保留对this
的引用。好的,我正在尝试实现,然后让您知道同样的情况。在控制台中获取错误并在屏幕中不提示消息:未捕获类型错误:this.setState不是一个函数。您可以发布整个组件代码以便我可以查看吗?检查此链接&让我知道,如果仍然需要任何关于代码的帮助哦,好的。错误发生的原因是成功
和错误
功能中的此
更改。您可以使用ES6样式的函数来删除错误。我将修改原始答案。对于ES5样式,您需要在另一个变量中保留对this
的引用。