Question

我只是将一些图像上传到我的网站，它具有1个父级多个文件输入，而其他则是子文件输入，当前仅获得1个文件。我想一一设定他们的价值观。

window.onload = function(){
  //Check File API support
  if(window.File && window.FileList && window.FileReader){
    var filesInput = document.querySelectorAll('.form-field__upload-file')[0];
    filesInput.addEventListener("change", function(event){
      var files = event.target.files;
      var output = document.getElementById("result");
      for(var i = 0; i< files.length; i++)
      {
        var file = files[i];
        //Only pics
        if(!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load",function(event){
          var picFile = event.target;
          var div = document.createElement("div");
          var icon = document.createElement('i');
          icon.className = "form-field__image-remove fa fa-trash";
          div.classList.add('form-field__image');
          div.appendChild(icon);

          var id = document.createElement('input');
          id.setAttribute('name','imageForms['+i+'].id');
          id.setAttribute('type','hidden');
          div.appendChild(id);

          var fi = document.createElement('input');
          fi.setAttribute('name','imageForms['+i+'].file');
          fi.setAttribute('type','file');
          fi.style.display = "none";
          fi.setAttribute('value','C:\\fakepath\\'+file.name);
          // fi.value ='C:\\fakepath\\'+file.name;
          div.appendChild(fi);

          div.style.backgroundImage = "url("+picFile.result+")";
          output.insertBefore(div,null);
        });
        picReader.readAsDataURL(file);
      }
    });
  }else{
    console.log("Your browser does not support File API");
  }
}

错误说

未捕获到的DOMException：无法在上设置'value'属性 'HTMLInputElement'：此输入元素接受文件名，该文件名可能只能通过编程将其设置为空字符串。

动态地将文件输入值从多个文件输入更改为子文件输入

0 个答案: