Html 上传前显示图像预览

在我的HTML表单中，我有输入文件和类型文件，例如：

 <input type="file" multiple>

然后我通过点击输入按钮来选择多个文件。

---

现在我想在提交表单之前显示所选图像的预览。如何在HTML 5中实现这一点？

下面是一个快速示例，通过将图像标记的

src

属性设置为对象URL，使用

URL.createObjectURL

来呈现缩略图：

html代码：

<input accept="image/*" type="file" id="files" />
<img id="image" />

下面HTML示例中的代码片段从用户的选择中过滤出图像，并将所选文件呈现到多个缩略图预览中：

功能手柄文件选择（evt）{
//循环浏览文件列表并将图像文件渲染为缩略图。
for（evt.target.files的常量文件）{
//渲染缩略图。
const span=document.createElement（'span'）
const src=URL.createObjectURL（文件）
span.innerHTML=
``
document.getElementById（'list'）.insertBefore（span，null）
}
}
document.getElementById（'files'）.addEventListener（'change'，handleFileSelect，false）
在这里，我使用FileReader API处理了jQuery

Html标记：

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>



jQuery:

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>

在jQuery代码中，首先检查文件扩展名。i、 e待处理的有效图像文件，然后将检查浏览器是否支持文件读取器API为是，然后仅处理其他显示受尊重的消息

$("#fileUpload").on('change', function () {
 
     //Get count of selected files
     var countFiles = $(this)[0].files.length;
 
     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();
 
     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {
 
             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {
 
                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }
 
                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }
 
         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });

$（“#fileUpload”）.on（'change'，function（）{
//获取所选文件的计数
var countFiles=$（this）[0].files.length；
var imgPath=$（this）[0]。值；
var extn=imgPath.substring（imgPath.lastIndexOf（'.'）+1.toLowerCase（）；
var image#u holder=$（“#image holder”）；
图像_holder.empty（）；
如果（extn==“gif”| | extn==“png”| | extn==“jpg”| | extn==“jpeg”）{
if（typeof（FileReader）！=“未定义”）{
//循环选择要上载的每个文件。
对于（var i=0；i功能手柄文件选择（evt）{
var files=evt.target.files；
//循环浏览文件列表并将图像文件渲染为缩略图。
for（var i=0，f；f=files[i]；i++）{
//仅处理图像文件。
如果（！f.type.match（'image.*'））{
继续；
}
var reader=new FileReader（）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
//渲染缩略图。
var span=document.createElement（'span'）；
span.innerHTML=
[
''
].加入（“”）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
//作为数据URL读入图像文件。
reader.readAsDataURL（f）；
}
}
document.getElementById（'files'）。addEventListener（'change'，handleFileSelect，false）；

对于背景图像，请确保使用
url（）

如果没有
FileReader
，我们可以使用
URL.createObjectURL
方法来获取表示对象（图像文件）的DOMString

不要忘记验证图像扩展

<input type="file" id="files" multiple />
<div class="image-preview"></div>



let file_input=document.querySelector（“#files”）；
让image_preview=document.querySelector（'.image preview'）；
常量句柄文件预览=（e）=>{
让files=e.target.files；
让length=files.length；
for（设i=0；i
现在如何取消一些上传的图像，然后提交表单？这对我真的很有帮助。但我想知道如何删除特定的文件以阻止上传。它是在某些结构中定义的。只需禁用文件输入元素，它就不会被上传！因此在上面的示例中：
document.getElementById（“uploadImage”）.disabled=true
@kamyanazeri如果文件阅读器不可用，那么如何？@Nicholas“显示代码段”下的代码段“实际上，让您加载多个图像并预览它们的单个图像：如果在代码< >循环< <代码> > < <代码> >循环< <代码> >迭代新变量>代码>阅读器< /代码>将被删除。添加<代码>接受=“图像/*”。

属性有助于防止选择非图像文件类型。如何在图像预览时显示图像的名称？

let file_input = document.querySelector('#files');
let image_preview = document.querySelector('.image-preview');

const handle_file_preview = (e) => {
  let files = e.target.files;
  let length = files.length;

  for(let i = 0; i < length; i++) {
      let image = document.createElement('img');
      // use the DOMstring for source
      image.src = window.URL.createObjectURL(files[i]);
      image_preview.appendChild(image);
  }
}

file_input.addEventListener('change', handle_file_preview);