Html5实现单张、多张图片上传功能

HTML5提供了<input type="file">标签，支持图片上传，具体实现单张或多张图片上传需要借助一些JavaScript库。

实现单张图片上传

基础功能

1. 在HTML页面中创建一个表单，包含一个<input type="file">标签，指定accept="image/*"，这样能够限制上传的文件类型只能为图片：

<form>
  <input type="file" accept="image/*">
</form>

1. 添加监听事件，在文件上传时获取上传的文件对象：

var inputElement = document.querySelector("input[type=file]");
inputElement.addEventListener("change", handleFiles, false);

function handleFiles(event) {
  var fileList = event.target.files;
  console.log(fileList[0]); // 上传的文件对象
}

1. 发送上传请求：

var formData = new FormData();
formData.append('file', fileList[0]);

var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.send(formData);

1. 服务端处理上传请求，上传成功后返回上传文件的URL地址。

增加预览功能

实现增加预览功能，可以预览用户选择的图片。

<form>
  <input type="file" accept="image/*">
  <img id="preview" src="" style="max-width: 300px; max-height: 300px;">
</form>

function handleFiles(event) {
  var fileList = event.target.files;
  var image = document.getElementById('preview');
  image.src = URL.createObjectURL(fileList[0]);
}

增加图片大小限制

可以添加最大图片上传大小的限制，用户上传大文件时进行提示。

<form>
  <input type="file" accept="image/*" onchange="checkSize(event)">
  <img id="preview" src="" style="max-width: 300px; max-height: 300px;">
</form>

function checkSize(event) {
  var fileList = event.target.files;
  if(fileList[0].size > 1024*1024) {
    alert("图片大小不能超过1MB");
    event.target.value = '';
  }
}

实现多张图片上传

实现多张图片上传需要使用JavaScript插件，常用的有Dropzone、Fine Uploader、Bootstrap FileInput等。

使用Dropzone插件

1. 引入Dropzone CSS和JavaScript文件：

<link href="https://cdn.jsdelivr.net/npm/dropzone@5.7.2/dist/dropzone.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/dropzone@5.7.2"></script>

1. 创建Dropzone对象，绑定到指定的HTML元素上：

<form action="upload.php" class="dropzone"></form>

Dropzone.autoDiscover = false;
var dz = new Dropzone("form", {
  paramName: "file",
  uploadMultiple: true,
  acceptedFiles: "image/*",
  maxFilesize: 1, // MB
  maxFiles: 5, // 最多上传5个文件
  dictDefaultMessage: "将文件拖放到此处上传",
  dictFallbackMessage: "浏览器不支持拖放上传",
  dictInvalidFileType: "只能上传图片文件",
  dictFileTooBig: "文件大小不能超过1MB",
  dictMaxFilesExceeded: "最多上传5个文件"
});

示例： Dropzone Example

使用Fine Uploader插件

1. 引入Fine Uploader CSS和JavaScript文件：

<link href="https://cdn.fineuploader.com/fine-uploader/5.17.3/fine-uploader-new.css" rel="stylesheet">
<script src="https://cdn.fineuploader.com/fine-uploader/5.17.3/jquery.fine-uploader.min.js"></script>

1. 创建FineUploader对象，绑定到指定的HTML元素上：

<div id="fine-uploader">上传文件</div>

var uploader = new qq.FineUploader({
  element: document.getElementById('fine-uploader'),
  request: {
    endpoint: '/server/upload'
  },
  multiple: true,
  maxFiles: 5, // 最多上传5个文件
  validation: {
    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
    sizeLimit: 1024*1024, // 1MB
    stopOnFirstInvalidFile: false,
    itemLimit: 5 // 最多上传5个文件
  },
  messages: {
    typeError: "{file}文件类型不正确(只支持{extensions}文件)。",
    sizeError: "{file}文件太大，文件大小不能超过{sizeLimit}。",
    itemLimitError: "超出最大上传数量(最多上传{itemLimit}个文件)。"
  },
  text: {
    uploadButton: '上传文件'
  }
});

示例： FineUploader Example