File(「JS进阶」 HTML5 之文件操作(file))
「JS进阶」 HTML5 之文件利用(file)
前言
在 HTML 文档中 <input type="file"> 标签每出现一次，一个 FileUpload 东西就会被创建。
该元素包孕一个文本输入字段，用来输入文件名，另有一个按钮，用来掀开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的称呼，但是当包孕一个 file-upload 元素的表单被提交的时分，欣赏器会向办事器发送选中的文件的内容而不仅仅是发送文件名。
当用户选择或编纂一个文件名，file-upload 元素触发 onchange 事变句柄。
看个复杂例子：
[html]view plaincopy
<!-- oscar999 -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title></title>
<script>
function handleFiles(files)
{
if(files.length)
{
var file = files[0];
var reader = new FileReader();
reader.onload = function()
{
document.getElementById("filecontent").innerHTML = this.result;
};
reader.readAsText(file);
}
}
</script>
</head>
<body>
<input type="file" id="file" onchange="handleFiles(this.files)"/>
<div id="filecontent"></div>
</body>
</html>
这里读取一个文件， 表如今div 中。
(在IE8 中 无效， this.files 无法读取文件。这个属于HTML5 的特性)
中选择了一个文件时，就会把包孕这个文件的列表（一个FileList东西）作为参数传给handleFiles()函数了。这个FileList东西相似一个数组，可以晓得文件的数目，而它的元素就是File东西了。从这个File东西可以获取name、size、lastModifiedDate和type等属性。把这个File东西传给FileReader东西的读取办法，就能读取文件了。
HTML5 Drag and Drop File
Html5 支持的File 的利用不仅仅是文件的选择，
在HTML5 之前必要使用 Applet 和 SilverLight 才干到达的文件拖拽功效，在HTML5 中也能轻松的完成，
看代码：
[html]view plaincopy
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title></title>
</head>
<body>
<div id="dropbox"> Drop Here </div>
<div id="filecontent"></div>
<script>
var dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
if(files.length)
{
var file = files[0];
var reader = new FileReader();
reader.onload = function()
{
document.getElementById("filecontent").innerHTML = this.result;
};
reader.readAsText(file);
}
}
</script>
</body>
</html>
这里经过事变东西的 dataTransfer 可以失掉文件。
读取文件内容
在第一个例子中， 我们使用 FileReader类来读取文件的内容，
在 W3C 草案中，File 东西只包孕文件名，文件典范等只读属性;FileReader用于内容读取和监控读取形态。
（在firefox 中， 可以直接使用 var fileBinary = file.getAsBinary(); 读取文件的二进制源码）
FileReader提供的办法包孕：
1. readAsBinaryString
2. readAsDataURL
3. readAsText
4. abort
.........
以下，举一个 使用 FileReader 将用户选择的图片不经过背景即时体现出来的例子。
[html]view plaincopy
function handleFiles(files){
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
同后端的交互
在一样寻常的HTML 中，使用办法是把file input 放在form 中， 以POST 办法把文件转达到后端。
在 HTML5 中， 也可以经过 FileReader 的 readAsBinaryString 办法读取到文件的二进制码，然后经过 XMLHttpRequest 的 sendAsBinary 办法将其发送出去。
[javascript]view plaincopy
var xhr = new XMLHttpRequest();
xhr.open("POST", "url");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
<pre code_snippet_id="422893" snippet_file_name="blog_20140709_4_2106578" class="sh_javascript sh_sourceCode" name="code">xhr<span class="sh_symbol">.</span><span class="sh_function">sendAsBinary</span><span class="sh_symbol">(</span>binaryString<span class="sh_symbol">);</span></pre><br>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
