REAC JS与预览

使用多个图像上传反应JS我需要预览我用下面的代码没有工作，那么显示我的错误控制台尝试多图片上传REAC 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 />

来源

2017-04-05 Murali Raj

这是没有意义的'$（ '占位-BLK。'）。 remove（）;'然后尝试添加到那个？它消失了。 –

而这里只有第一个文件？ 'var file = e.target.files [0];'你的意思是处理'var numFiles = e.target.files.length; （var i = 0，numFiles = e.target.files.length; i

是的，我也可以上传多个图像文件也@MarkSchultheiss –

你有没有尝试添加值的状态，并从国家填写姓名。喜欢的东西

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

来源

2017-04-05 17:09:47 Sampath

可以给你的工作示例@sampath –

添加代码请检查@MuraliRaj – Sampath

这没有意义$('.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/

来源

2017-04-05 18:45:25

REAC JS与预览

回答

相关问题