Skip to main content

input File文件上传

file对象

element的files里面获取文件;

file = files[n];

  • name: 文件名
  • size:文件大小
  • type:文件Mime类型

显示文件大小

function updateSize() {
let nBytes = 0,
oFiles = document.getElementById("uploadInput").files,
nFiles = oFiles.length;
for (let nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
let sOutput = nBytes + " bytes";
// optional code for multiples approximation
const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
for (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;
}

唤起隐藏的file

click唤醒

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

fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
}, false);

label唤醒

显示用户选择的缩略图

  • 通过fileRender

[FileReader](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)来处理异步的图片加载并把他赋给img元素。在创建一个新的 FileReader对象后,我们新建了它的onload 函数,然后调用readAsDataURL()函数开始后台读取文件。当整个图片文件的内容都被全部加载完后,它们被转换成了一个被传递到onload回调函数的data:URL。我们再执行常规操作将img元素的src属性设置为刚刚加载完毕的URL,使得图像可以显示在用户屏幕上的缩略图中。

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 或 [Blob](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个[<input>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input)元素上选择文件后返回的[FileList](https://developer.mozilla.org/zh-CN/docs/Web/API/FileList)对象,也可以来自拖放操作生成的 [DataTransfer](https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer)对象,还可以是来自在一个[HTMLCanvasElement](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement)上执行mozGetAsFile()方法后返回结果。

重要提示: FileReader仅用于以安全的方式从用户(远程)系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件,应使用标准Ajax解决方案进行服务器端文件读取,如果读取跨域,则使用CORS权限。

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); // 假设"preview"就是用来显示内容的div

var reader = new FileReader();
// 注意闭包
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
  • 使用window.URL对象

设置图片的源为一个新的指代文件的对象URL,使用[window.URL.createObjectURL() (en-US)](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL)来创建blob URL。

设置图片的load事件处理器来释放对象URL,当图片加载完成之后对象URL就不再需要了。这个可以通过调用[window.URL.revokeObjectURL() (en-US)](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)方法并且传递 img.src中的对象URL字符串来实现。