<input type="file">系列文章一(下)
2017-10-18 14:43
627 查看
问题1:enctype是什么?
技巧1:常用小技巧:htmlpreview.github.io 用来预览github上的html页面, 知识获取于:https://www.v2ex.com/t/53076
接下来,我们来看javascript:
var input = document.querySelector('input');
var preview = document.querySelector('.preview');
input.style.opacity = 0;
input.addEventListener('change', updateImageDisplay);
function updateImageDisplay() {
while(preview.firstChild) {
preview.removeChild(preview.firstChild);
}
var curFiles = input.files;
if(curFiles.length === 0) {
var para = document.createElement('p');
para.textContent = 'No files currently selected for upload';
preview.appendChild(para);
} else {
var list = document.createElement('ol');
preview.appendChild(list);
for(var i = 0; i < curFiles.length; i++) {
var listItem = document.createElement('li');
var para = document.createElement('p');
if(validFileType(curFiles[i])) {
para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
var image = document.createElement('img');
image.src = window.URL.createObjectURL(curFiles[i]);
listItem.appendChild(image);
listItem.appendChild(para);
} else {
para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
listItem.appendChild(para);
}
list.appendChild(listItem);
}
}
}
var fileTypes = [
'image/jpeg',
'image/pjpeg',
'image/png'
]
function validFileType(file) {
for(var i = 0; i < fileTypes.length; i++) {
if(file.type === fileTypes[i]) {
return true;
}
}
return false;
}
function returnFileSize(number) {
if(number < 1024) {
return number + 'bytes';
} else if(number > 1024 && number < 1048576) {
return (number/1024).toFixed(1) + 'KB';
} else if(number > 1048576) {
return (number/1048576).toFixed(1) + 'MB';
}
}
input.style.opacity = 0; 隐藏input元素,因为文件输入在浏览器中的设计是丑陋的,很难用样式改变,而且各个浏览器的表现很不一致。在这里可以通过点击<label>来激活输入元素,因此做好隐藏输入元素,将label写成按钮的样式,所以用户将会知道点它可以上传文件。
注意:opacity被用来隐藏input,代替visibility:hidden或display: none。因为为残疾人设计的技术(辅助技术)理解后两种样式,意味着文件输入不能交互。(because assistive technology interprets the latter two styles to mean the file input isn't interactive.)
input.addEventListener('change', updateImageDisplay); 监听input元素,当value更改时(当文件被选中时),调用自定义函数updateImageDisplay()。
来看updateImageDisplay()函数,使用while循环来清空预览<div>的以前内容。
获取包含所有选定文件信息的FileList对象,并将其存储在一个名为curfile的变量中。
检查ifcurFiles.length是否等于0,检查是否没有选择任何文件。如果是,请在预览<div>中打印一条消息,指出没有选择任何文件。
如果选择文件,我们循环遍历每个文件,将其打印到预览<div>中。注意事项:
我们使用自定义的validFileType()函数来检查文件是否是正确的类型(例如accept属性中指定的图像类型)。
如果是,我们:
将其名称和文件大小打印到之前的<div>中的列表项目中(从curFiles [i] .name和curFiles [i] .size获取)。自定义的returnFileSize()函数返回一个格式为格式的格式,大小为字节/ KB / MB(默认情况下,浏览器以绝对字节的形式报告大小)。
通过调用window.URL.createObjectURL(curFiles [i])生成图像的缩略图预览,并减少CSS中的图像大小,然后将该图像插入列表项。
如果文件类型无效,我们会在列表项目中显示一条消息,告诉用户他们需要选择不同的文件类型。
自定义的validFileType()函数将File对象作为参数,然后循环遍历允许的文件列表,检查是否匹配文件的type属性。如果找到匹配项,则该函数返回true,如果没有匹配,则返回false。
returnFileSize()函数使用一个数字(从当前文件的size属性中取出的字节数),并将其转换成格式良好的大小(以字节/ KB / MB为单位)。
技巧1:常用小技巧:htmlpreview.github.io 用来预览github上的html页面, 知识获取于:https://www.v2ex.com/t/53076
接下来,我们来看javascript:
var input = document.querySelector('input');
var preview = document.querySelector('.preview');
input.style.opacity = 0;
input.addEventListener('change', updateImageDisplay);
function updateImageDisplay() {
while(preview.firstChild) {
preview.removeChild(preview.firstChild);
}
var curFiles = input.files;
if(curFiles.length === 0) {
var para = document.createElement('p');
para.textContent = 'No files currently selected for upload';
preview.appendChild(para);
} else {
var list = document.createElement('ol');
preview.appendChild(list);
for(var i = 0; i < curFiles.length; i++) {
var listItem = document.createElement('li');
var para = document.createElement('p');
if(validFileType(curFiles[i])) {
para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
var image = document.createElement('img');
image.src = window.URL.createObjectURL(curFiles[i]);
listItem.appendChild(image);
listItem.appendChild(para);
} else {
para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
listItem.appendChild(para);
}
list.appendChild(listItem);
}
}
}
var fileTypes = [
'image/jpeg',
'image/pjpeg',
'image/png'
]
function validFileType(file) {
for(var i = 0; i < fileTypes.length; i++) {
if(file.type === fileTypes[i]) {
return true;
}
}
return false;
}
function returnFileSize(number) {
if(number < 1024) {
return number + 'bytes';
} else if(number > 1024 && number < 1048576) {
return (number/1024).toFixed(1) + 'KB';
} else if(number > 1048576) {
return (number/1048576).toFixed(1) + 'MB';
}
}
input.style.opacity = 0; 隐藏input元素,因为文件输入在浏览器中的设计是丑陋的,很难用样式改变,而且各个浏览器的表现很不一致。在这里可以通过点击<label>来激活输入元素,因此做好隐藏输入元素,将label写成按钮的样式,所以用户将会知道点它可以上传文件。
注意:opacity被用来隐藏input,代替visibility:hidden或display: none。因为为残疾人设计的技术(辅助技术)理解后两种样式,意味着文件输入不能交互。(because assistive technology interprets the latter two styles to mean the file input isn't interactive.)
input.addEventListener('change', updateImageDisplay); 监听input元素,当value更改时(当文件被选中时),调用自定义函数updateImageDisplay()。
来看updateImageDisplay()函数,使用while循环来清空预览<div>的以前内容。
获取包含所有选定文件信息的FileList对象,并将其存储在一个名为curfile的变量中。
检查ifcurFiles.length是否等于0,检查是否没有选择任何文件。如果是,请在预览<div>中打印一条消息,指出没有选择任何文件。
如果选择文件,我们循环遍历每个文件,将其打印到预览<div>中。注意事项:
我们使用自定义的validFileType()函数来检查文件是否是正确的类型(例如accept属性中指定的图像类型)。
如果是,我们:
将其名称和文件大小打印到之前的<div>中的列表项目中(从curFiles [i] .name和curFiles [i] .size获取)。自定义的returnFileSize()函数返回一个格式为格式的格式,大小为字节/ KB / MB(默认情况下,浏览器以绝对字节的形式报告大小)。
通过调用window.URL.createObjectURL(curFiles [i])生成图像的缩略图预览,并减少CSS中的图像大小,然后将该图像插入列表项。
如果文件类型无效,我们会在列表项目中显示一条消息,告诉用户他们需要选择不同的文件类型。
自定义的validFileType()函数将File对象作为参数,然后循环遍历允许的文件列表,检查是否匹配文件的type属性。如果找到匹配项,则该函数返回true,如果没有匹配,则返回false。
returnFileSize()函数使用一个数字(从当前文件的size属性中取出的字节数),并将其转换成格式良好的大小(以字节/ KB / MB为单位)。
相关文章推荐
- <input type="file">系列文章一(上)
- 上传按钮样式优化 <input type="file" />
- <input type="file" />浏览时只显示指定文件类型
- <input type="file" />,美化自定义上传按钮
- html中,文件上传时使用的<input type="file">的样式自定义
- <input type="file" />浏览时只显示指定文件类型
- 诡异的<input type="file">
- 自定义 <input type="file" /> 样式
- 处理各大浏览器的<input type="file">显示风格迥异的问题
- <input type="file" name="file"> 上传表单域浏览按钮样式更改
- android支持html的<input type="file">标签
- [置顶] <input type="file">的accept属性值详解
- <input type="file">accept属性 调起手机摄像头 支持Safari Chrome和大部分手机内置浏览器
- 将html中的<input type="file" />(选择文件) 元素隐藏,并通过其它方式触发点击。file input 美化
- <input type="file" />浏览时只显示指定文件类型
- <input type="file">自定义样式3
- An invalid form control with name='file[]' is not focusable.间接点击form表单的<input type="file">出现的问题
- <input type="file" />浏览时只显示指定文件类型
- JQuery------获取<input type="file">中的文件内容
- <input type="file" />浏览时只显示指定文件类型