深入解析remy/html5demos中的拖拽上传实现-优快云博客

深入解析remy/html5demos中的拖拽上传实现

html5demos Collection of hacks and demos showing capability of HTML5 apps 项目地址: https://gitcode.com/gh_mirrors/ht/html5demos

HTML5为现代Web开发带来了许多强大的API，其中拖拽上传功能极大地提升了用户体验。本文将通过分析remy/html5demos项目中的dnd-upload.html文件，深入讲解如何利用HTML5技术实现一个完整的拖拽上传功能。

功能概述

这个示例演示了如何实现以下功能：

拖拽文件到指定区域进行上传
自动预览拖拽的图片文件
显示上传进度条
优雅降级处理（在不支持某些API的浏览器中提供替代方案）

核心HTML结构

示例使用简洁的HTML结构构建上传区域：

<div id="holder"></div>
<p id="upload" class="hidden">
  <label>Drag & drop not supported, but you can still upload via this input field:<br>
    <input type="file">
  </label>
</p>
<p id="filereader">File API & FileReader API not supported</p>
<p id="formdata">XHR2's FormData is not supported</p>
<p id="progress">XHR2's upload progress isn't supported</p>
<p>Upload progress: <progress id="uploadprogress" max="100" value="0">0</progress></p>

关键技术点解析

1. 浏览器能力检测

代码首先检测浏览器是否支持相关API：

var tests = {
  filereader: typeof FileReader != 'undefined',
  dnd: 'draggable' in document.createElement('span'),
  formdata: !!window.FormData,
  progress: "upload" in new XMLHttpRequest
};

这些检测包括：

FileReader API：用于读取文件内容
拖拽API：检查元素是否支持draggable属性
FormData：用于构建表单数据
XMLHttpRequest上传进度：用于显示上传进度

2. 拖拽事件处理

对于支持拖拽的浏览器，设置相关事件处理器：

holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();
  readfiles(e.dataTransfer.files);
}

ondragover：当文件被拖到上传区域上方时，添加hover样式
ondragend：拖拽结束时移除hover样式
ondrop：文件放下时处理文件

3. 文件预览功能

previewfile函数实现了图片预览功能：

function previewfile(file) {
  if (tests.filereader === true && acceptedTypes[file.type] === true) {
    var reader = new FileReader();
    reader.onload = function (event) {
      var image = new Image();
      image.src = event.target.result;
      image.width = 250; // 简单调整图片大小
      holder.appendChild(image);
    };
    reader.readAsDataURL(file);
  } else {
    holder.innerHTML += '<p>Uploaded ' + file.name + ' ' + (file.size ? (file.size/1024|0) + 'K' : '');
  }
}

4. 文件上传实现

readfiles函数处理文件上传：

function readfiles(files) {
  var formData = tests.formdata ? new FormData() : null;
  for (var i = 0; i < files.length; i++) {
    if (tests.formdata) formData.append('file', files[i]);
    previewfile(files[i]);
  }

  if (tests.formdata) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/devnull.php');
    xhr.onload = function() {
      progress.value = progress.innerHTML = 100;
    };

    if (tests.progress) {
      xhr.upload.onprogress = function (event) {
        if (event.lengthComputable) {
          var complete = (event.loaded / event.total * 100 | 0);
          progress.value = progress.innerHTML = complete;
        }
      }
    }
    xhr.send(formData);
  }
}

优雅降级处理

对于不支持拖拽API的浏览器，示例提供了传统的文件输入方式：

fileupload.className = 'hidden';
fileupload.querySelector('input').onchange = function () {
  readfiles(this.files);
};

样式设计

示例中的CSS样式简单但实用：

#holder { border: 10px dashed #ccc; width: 300px; min-height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #0c0; }
#holder img { display: block; margin: 10px auto; }
#holder p { margin: 10px; font-size: 14px; }
progress { width: 100%; }
progress:after { content: '%'; }
.fail { background: #c00; padding: 2px; color: #fff; }
.hidden { display: none !important;}