js实现浏览器中批量jpeg、png、jpg图片格式转换成webp示例代码-html代码-BFW代码库

js实现浏览器中批量jpeg、png、jpg图片格式转换成webp示例代码

代码语言：html

所属分类：其他

代码描述：js实现浏览器中批量jpeg、png、jpg图片格式转换成webp示例代码，可以拖拽图片文件后自动转换下载，支持多个文件批量转换。

代码标签： js 浏览器批量 jpeg png jpg 图片格式转换 webp 示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image to WebP Conversion</title>
<style>
  #dropZone {
    border: 2px dashed #ccc;
    border-radius: 20px;
    width: 480px;
    font-family: sans-serif;
    margin: 100px auto;
    padding: 20px;
    text-align: center;
  }
  #dropZone.highlight {
    border-color: purple;
  }
  #fileElem {
    display: none;
  }
  #status {
    margin-top: 20px;
    font-style: italic;
  }
</style>
</head>
<body>
<div id="dropZone">
  <p>拖放图片文件到这里或者</p>
  <button id="selectFiles">选择文件</button>
  <input type="file" id="fileElem" multiple accept="image/*">
</div>
<div id="status"></div>

<script>
let dropZone = document.getElementById('dropZone');
let fileElem = document.getElementById('fileElem');
let selectFiles = document.getElementById('selectFiles');
let statusDiv = document.getElementById('status');

function updateStatus(message) {
  statusDiv.textContent = message;
  console.log(message);
}

selectFiles.addEventListener('click', function(e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault();
}, false);

fileElem.addEventListener('change', function(e) {
  updateStatus('文件选择事件触发');
  handleFiles(e.target.files);
}, false);

dropZone.addEventListener('dragover', function(e) {
  e.preventDefault();
  e.stopPropagation();
  this.classList.add('highlight');
});

dropZone.addEventListener('dragleave', function(e) {
  e.preventDefault();
  e.stopPropagation();
  this.classList.remove('highlight');
});

dropZone.addEventListener('drop', function(e) {
  e.preventDefault();
  e.stopPropagation();
  this.classList.remove('highlight&.........完整代码请登录后点击上方下载按钮下载查看