用预览反应js多张图片上传答案

【问题标题】：react js multiple image upload with preview用预览反应js多张图片上传
【发布时间】：2017-04-05 17:04:34
【问题描述】：

使用 react js 我需要多个带有预览的图像上传我尝试使用下面的代码无法正常工作，它在控制台中显示错误

未捕获的 DOMException：无法设置“值”属性 'HTMLInputElement'：这个输入元素接受一个文件名，它可以只能以编程方式设置为空字符串。

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 />

【问题讨论】：

这毫无意义$('.placeholder-blk').remove(); 然后尝试添加到那个前面？没了。
这里只有第一个文件？ var file = e.target.files[0];你是不是要处理文件var numFiles = e.target.files.length; for (var i = 0, numFiles = e.target.files.length; i < numFiles; i++) { var file = e.target.files[i]; .. }
是的，我也可以上传多个图像文件@MarkSchultheiss
参考这里如何做原始：developer.mozilla.org/en-US/docs/…
谢谢@MarkSchultheiss 我得到了输出但是当添加div时它复制了div现在我编辑了上面一个更新的代码

标签： javascript reactjs

【解决方案1】：

您是否尝试将值添加到状态并从状态填充名称。类似的东西

<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"] 并将输入值设置为这些值来改变。

【讨论】：

【解决方案2】：

这毫无意义$('.placeholder-blk').remove(); 然后随后尝试添加它？没了。

这里只有第一个文件？

var file = e.target.files[0];

你是不是要处理文件

var numFiles = e.target.files.length; 
for (var i = 0, numFiles = e.target.files.length; i < numFiles; i++) 
{ var file = e.target.files[i]; .. }

在此处参考如何原始操作：developer.mozilla.org/en-US/docs/

【讨论】：