欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

在web应用程序中使用文件

程序员文章站 2022-03-07 13:20:18
...

翻译自MDN

使用HTML5中添加到DOM的File API,web内容现在可以要求用户选择本地文件，然后读取这些文件的内容。可以通过使用HTML <input>元素或拖放操作来完成此选择。

访问本地文件

html语法:

<input type="file" id="input">

File API可以从 File
 对象中读取FlieList,FlieList中包含了用户所选取的文件

如果用户只选取了一个文件,那么我们只需要考虑第一个文件对象

使用DOM读取选择的文件:

var selectedFile = document.getElementById('input').files[0];

通过一个change事件访问选择的文件

可以通过change事件(不强制)访问FlieList,

<input type="file" id="input" onchange="handleFiles(this.files)">

当用户选择一个文件时，handleFiles()函数将调用一个FlieList对象，该对象包含表示用户选择的文件的文件对象。

如果您想让用户选择多个文件，只需使用输入元素上的multiple属性:

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

在这种情况下，传递给handleFiles()函数的文件列表包含用户所选择的每个文件的一个文件对象。

获取选中文件的信息

DOM提供的FlieList对象列出由用户选择的所有文件，每个文件都指定为一个File
对象。通过检查文件列表长度属性的值，您可以确定用户选择了多少个文件:

var numFiles = files.length;

单个文件对象可以通过简单地访问列表数组来检索:

for (var i = 0, numFiles = files.length; i < numFiles; i++) {
  var file = files[i];
  ..
}

这个循环遍历文件列表中的所有文件。

File
对象有三个带有文件信息的属性

  • name 文件名(只读),不包含文件路径信息
  • size 文件大小(只读),单位是字节(bytes)
  • type 文件的MIME-type,如果获取不到文件的MIME-type,则这个属性就是一个空字符串

示例:显示文件的大小

下面的示例显示了可能使用的大小属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File(s) size</title>
<script>
function updateSize() {
  var nBytes = 0,
      oFiles = document.getElementById("uploadInput").files,
      nFiles = oFiles.length;
  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
    nBytes += oFiles[nFileId].size;
  }
  var sOutput = nBytes + " bytes";
  // optional code for multiples approximation
  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
  }
  // end of optional code
  document.getElementById("fileNum").innerHTML = nFiles;
  document.getElementById("fileSize").innerHTML = sOutput;
}
</script>
</head>

<body onload="updateSize();">
<form name="uploadForm">
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="submit" value="Send file"></p>
</form>
</body>
</html>

使用click()方法使用隐藏的文件输入元素

从 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)开始,您可以隐藏公认的丑陋文件<input>元素，并呈现您自己的接口，以打开并显示用户选择的文件。您可以通过将input元素设计为display:none并调用< input >元素的click()方法。

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>

处理单击事件的代码可以如下所示:

var fileSelect = document.getElementById("fileSelect"),
  fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

您可以按您希望的那样，样式化新的按钮来打开文件选择器。

使用label元素触发隐藏的文件输入元素

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<label for="fileElem">Select some files</label>

没有必要添加JavaScript代码来调用文件元素的click()。在这种情况下，您可以按照您的希望来样式化标签元素。

使用拖放来选取文件

您还可以让用户将文件拖放到web应用程序中。

首先是设置一个接收的区域。根据你的应用程序的设计，你的内容的不同部分会接受不同的内容,但是让元素接收drop事件是很容易的:

var dropbox;

dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false); //进入
dropbox.addEventListener("dragover", dragover, false);//移动
dropbox.addEventListener("drop", drop, false);//放下

在本例中，我们将带ID dropbox的元素转换为我们的drop区域。这是通过监听dragenter、dragover和drop事件来实现的。

在我们的例子中，我们实际上不需要对dragenter和dragover事件做任何事情，所以这些函数都很简单。他们只是停止传播事件，防止发生默认的行为:

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

真正的魔法发生在drop()函数中:

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}

这里，我们从事件中检索dataTransfer字段，将文件列表拉出，然后将其传递给handleFiles()。从这一点来看，处理文件的方式与用户使用输入元素或拖放的方式是一样的。

显示图片的缩略图

假设您正在开发下一个伟大的照片共享网站，并希望使用HTML5在用户实际上传图片之前显示缩略图预览。您可以像前面讨论的那样建立您的输入元素或删除区域，并将其调用为以下函数，如handlefile()函数。

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;
    
    if (!imageType.test(file.type)) {
      continue;
    }
    
    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
    
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

在这里，我们的循环处理用户选择的文件，查看每个文件的类型属性，看它是否是一个图像文件(通过在MIME类型字符串模式“image / *”上进行正则表达式匹配)。对于每个图像文件，我们创建一个新的img元素。

给每个img对象添加一个file属性以辨認 File;这将让我们稍后获取实际上传的图像。使用Node.appendChild()将新缩略图添加到文档的预览区域。

接下来，新建一个FileReader对象来处理异步加载图像并将其附加到img元素。创建了新的FileReader对象后，设置onload函数，然后调用readAsDataURL()以在后台启动读操作。当加载图像文件的全部内容时，它们将转换为数据传递给onload回调的URL。这个示例的实现将img元素的src属性设置为加载的图像，结果显示在用户屏幕上的缩略图中出现的图像。

使用 object URLs

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 支持DOM 的 window.URL.createObjectURL()
和window.URL.revokeObjectURL()
方法.这些可以创建简单的URL字符串，可以用来引用任何可以引用DOM File
 对象的数据,包括用户计算机上的本地文件

当您有一个文件对象时，您希望从HTML中引用URL，您可以为它创建一个object URL:

var objectURL = window.URL.createObjectURL(fileObj);

object URL是标识文件对象的字符串。每次调用window.URL.createObjectURL()时，都会创建一个唯一的object URL,即使之前已经给这个文件创建过一个对象了。当文档被卸载时，它们会自动被释放，如果你的页面动态地使用它们，你应该通过调用window.URL.revokeObjectURL()显式地释放它们

window.URL.revokeObjectURL(objectURL);

上一篇： Vue显示和隐藏如何用动画形式显示

下一篇： 视觉SLAM十四讲：回环检测-知识点+代码

推荐阅读