问题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为单位)。