EKsumic's Blog

let today = new Beginning();

Click the left button to use the catalog.

OR

JS代码实例:读取多张图片文件并显示(附说明)

接前面

我们只需要修改部分代码即可实现。

 

这里我们给原来的input控件增加一个multiple属性:

<input type="file" id="file-input" multiple />

 

我需要提醒一下:

fileInput.addEventListener('change', function() {}); 中的函数实际上具有一个默认的 event 参数。

即你就像以上这么写,它还是相当于

fileInput.addEventListener('change', function(event) {
  // 事件处理程序
});

那么,我们可以再简写一下:

fileInput.addEventListener("change", (event) => {
  // 事件处理程序
});

这种写法可以更简洁地定义函数,并且在定义时会绑定 this 到当前的执行上下文中。在这个例子中,箭头函数的 this 将指向 fileInput 元素,而不是全局对象。

而上一个方法:

这种写法使用了一个普通函数来定义事件处理程序,它的 this 将在运行时动态绑定。在这个例子中,this 将指向 fileInput 元素,因为它是事件的目标元素。

 

然后我们遍历文件:

// 遍历选择的所有文件
for (const file of event.target.files) {
  const reader = new FileReader();			
}

注意这里的event.target.files在一定情况下可以写成this.files。(但我不建议)

为了使得程序准确,建议你还是老实写event。

 

我们学另外一个等价的onload的方法:

reader.addEventListener("load", (event) => {

});

它和以下代码是等价的:

reader.onload = function() {

}

reader.onload 和 reader.addEventListener("load", function(event) {}) 都是用于监听 FileReader 对象读取操作完成的事件。它们的作用是相同的,但是它们的语法略有不同。

reader.onload 是将函数作为属性分配给 FileReader 对象的传统方式。当 FileReader 对象完成读取操作时,它将自动调用该函数。

reader.addEventListener("load", function(event) {}) 利用了 EventTarget 接口定义的标准事件处理程序的语法。

 

用监听器实现的:

     fileInput.addEventListener('change', (event) => {
		  
		// 遍历选择的所有文件
        for (const file of event.target.files) {
			console.log(event);
          if (file && file.type.startsWith('image/')) {         
            const reader = new FileReader();
			 reader.addEventListener("load", (event) => {
            // 创建一个新的 img 元素,显示图片
            const img = document.createElement("img");
            img.src = event.target.result;
            img.style.maxWidth = "100%";
            img.style.maxHeight = "100%";
            //imageContainer.innerHTML = '';
            imageContainer.appendChild(img);
          });

          // 读取文件,转换为 Data URL 格式的字符串
          reader.readAsDataURL(file);

        } else {
          imageContainer.innerHTML = '请选择图片文件';
        }          
		}   
      });

等价写法:

   fileInput.addEventListener('change', function() { 
		// 遍历选择的所有文件
        for (const file of fileInput.files) {
          if (file && file.type.startsWith('image/')) {         
            const reader = new FileReader();
			  
			 reader.onload= function(){
				 
				 // 创建一个新的 img 元素,显示图片
            const img = document.createElement("img");
            img.src = reader.result;
            img.style.maxWidth = "100%";
            img.style.maxHeight = "100%";
            //imageContainer.innerHTML = '';
            imageContainer.appendChild(img);				 
			 } 

          // 读取文件,转换为 Data URL 格式的字符串
          reader.readAsDataURL(file);

        } else {
          imageContainer.innerHTML = '请选择图片文件';
        }          
		}
      
      });

 

完整HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成 GIF 图片</title>
<script src="https://unpkg.com/[email protected]/dist/gif.js"></script>
</head>
<body>
<input type="file" id="file-input" multiple>
<div id="image-container"></div>
<script>
  const fileInput = document.getElementById('file-input');
      const imageContainer = document.getElementById('image-container');

   fileInput.addEventListener('change', function() { 
		// 遍历选择的所有文件
        for (const file of fileInput.files) {
          if (file && file.type.startsWith('image/')) {         
            const reader = new FileReader();
			  
			 reader.onload= function(){
				 
				 // 创建一个新的 img 元素,显示图片
            const img = document.createElement("img");
            img.src = reader.result;
            img.style.maxWidth = "100%";
            img.style.maxHeight = "100%";
            imageContainer.appendChild(img);		 
			 } 

          // 读取文件,转换为 Data URL 格式的字符串
          reader.readAsDataURL(file);

        } else {
          imageContainer.innerHTML = '请选择图片文件';
        }          
		}
      
      });
</script>
</body>
</html>

 

This article was last edited at 2023-05-10 19:02:14

* *