js图片批量上传代码案例

以下是一个简单的示例代码，用于实现批量上传图片：

HTML部分：

<input type="file" id="fileInput" multiple>
<button onclick="uploadImages()">上传图片</button>
<div id="previewContainer"></div>

JavaScript部分：

function uploadImages() {
  var fileInput = document.getElementById('fileInput');
  var previewContainer = document.getElementById('previewContainer');
  
  // 获取所有选择的文件
  var files = fileInput.files;
  
  // 遍历每个文件进行预览和上传
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    
    // 创建一个新的文件读取器
    var reader = new FileReader();
    
    // 当读取完成时，触发onload事件
    reader.onload = function(e) {
      // 创建一个新的图片元素
      var image = document.createElement('img');
      image.src = e.target.result;
      image.className = 'preview-image';
      
      // 将图片添加到预览容器中
      previewContainer.appendChild(image);
    };
    
    // 读取文件为DataURL
    reader.readAsDataURL(file);
    
    // 在这里编写图片上传的代码，可以使用Ajax或其他方式将图片发送到服务器
    // ...
  }
}

上述代码通过一个文件输入框 (`<input type="file" multiple>`) 实现了批量选择图片的功能，并且在选择图片后会将每张图片预览到页面上。你可以根据你自己的需求，修改上传的逻辑以及预览的样式。