使用 React js 我需要多张图片上传预览 我尝试使用以下代码无法正常工作,它在控制台中显示错误
Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
uploadImage(e){
var numFiles = e.target.files.length;
for (var i = 0, numFiles = e.target.files.length; i < numFiles; i++){
var file = e.target.files[i];
if(!file.type.match('image'))
continue;
var reader = new FileReader();
reader.onload = function(e) {
setOfImages.push({
fileName:file.name,
image:e.target.result.split(',')[1]
});
for(var j = 0; j<setOfImages.length; j++) {
$('.placeholder-blk').prepend('<div class="image-placeholder"><img src="data:image/jpeg;base64,'+ setOfImages[j].image +'" /></div>');
}
console.log(setOfImages);
}
reader.readAsDataURL(file);
}
}
<input type="file" name="image-uploder" id="image-uploder" className="file-loader" onChange={this.uploadImage.bind(this)} multiple />
最佳答案
您是否尝试将值添加到状态并从状态填充名称。 有点像
<input type="file" name={this.state.setOfImages} id="image-uploder" className="file-loader" onChange={this.uploadImage.bind(this)} multiple />
并在您的函数内部填充状态。
this.setState({setOfImages: JSON.stringify(setOfImages)})
像这样。
export class Demo extends React.Component{
constructor(props){
super(props)
this.state = {
setOfImages : []
}
}
setOfImages(event){
event.preventDefault();
this.setState({
setOfImages: ["hello", "hi"]
})
}
render(){
return (
<div>
<input value={this.state.setOfImages}/>
<button onClick={this.setOfImages.bind(this)}/>
</div>
)
}
}
现在首先将用空数组填充输入。当您单击按钮时,状态将通过设置 setOfImages = ["hello", "hi"] 并将输入值设置为这些值而改变。
关于javascript - react js 多图像上传与预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43237439/
相关文章:
angularjs - 如何将 gmail api 正确加载到 angular 2 应用程序
wordpress - WP_Query - 按文件名订购附件?
javascript - 如何在 Chart.js 的条形图列中添加背景图片?
sql - 为什么非聚集索引列仍然进行索引扫描而不是索引查找
php - SwiftMailer 在电子邮件正文中附加图像
apache-spark - 检查spark sql中的日期有效性
tensorflow - TensorFlow 中的生存分析
caching - 通过自定义响应 header 绕过 Nginx 缓存