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字符串来实现。