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

Question

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

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