如何使用html，javascript / jquery上传图像并将其显示在同一页面中

Question

如何使用html，javascript / jquery上传图像并将其显示在同一页面中，就像在facebook和instagram中一样。 谁能帮忙吗？

Answer 1

尝试一下

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
    if (this.files && this.files[0]) {
      var img = document.querySelector('img'); // $('img')[0]
      img.src = URL.createObjectURL(this.files[0]); // set src to file url
    }
  });
});

<input type='file' />
<br>
<img id="myImg" src="#" alt="your image" width="100" height="100">

Answer 2

尝试一下...。非常简单

function showMyImage(fileInput) {
      var files = fileInput.files;
        //console.log(files);
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            console.log(file.name);
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
            thumbnil.style.display = 'block';
            //$("#banner_name").text(file.name);

        }
  }

<input type='file' id="upload" onchange="showMyImage(this)" />
<img id="thumbnil" style="width:100%; max-width: 200px; margin:10px 0; display:none;"  src="" alt="logo"/>