Help us understand the problem. What is going on with this article?

JSでファイルを読み込んで表示する方法

More than 5 years have passed since last update.

貼付けたいファイルを画面に反映させる。
参考URL: https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images

<input type="file" id="fileSelector" multiple accept="image/*" />

<ul id="fileContentList" style="list-style-type: none;"></ul>

<script>
  $(document).ready(function(){
    $('#fileSelector').on('change', function(evt){
      showImage(evt);
    });

    function showImage(evt){
      var files = evt.target.files; 

      if (!files) {
        alert("ファイルの読み込みに失敗しました、もう一度トライして下さい");
        return;
      }

      // javascript version
      var img_element = document.createElement('img');
          img_element.src = window.URL.createObjectURL(files[0]);
          img_element.width = 100;
          img_element.style.verticalAlign = "middle";
          img_element.style.margin = "4px 4px 4px 0";
          window.URL.revokeObjectURL(this.src);

      var span_element = document.createElement('span');
          span_element.innerHTML = files[0].name;

      var li_element = document.createElement('li');
          li_element.appendChild(img_element);
          li_element.appendChild(span_element);
      document.getElementById('fileContentList').appendChild(li_element);

      // jQuery version
      var fileContent = $('#fileContentList');

      var image = $('<img>').appendTo(fileContent);
          image.css({
            width: 100,
            verticalAlign: 'middle',
            margin: '4px 4px 4px 0'
          });
          image.attr('src', window.URL.createObjectURL(files[0]));

      var span = $('span');
          span.innerHTML = files[0].name;

      var li = $('li');
          li.append(image);
          li.append(span);

      fileContent.append(li);
    }
  });
</script>


fukumone
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away