整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在 HTML 文档中 <input type="file"> 标签每出现一次，一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称，但是当包含一个 file-upload 元素的表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
当用户选择或编辑一个文件名，file-upload 元素触发 onchange 事件句柄。
看个简单例子：
[html]view plaincopy
<!-- oscar999 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <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 支持的File 的操作不仅仅是文件的选择，
在HTML5 之前需要使用 Applet 和 SilverLight 才能达到的文件拖拽功能，在HTML5 中也能轻松的实现，
看代码：
[html]view plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <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> 、良生- input type=file与文件上传
本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下：
<input type=file>
但是，为了习惯，我们多写成：
<input type="file">
在HTML5出现之前(XHTML)，我们的闭合规则则有些出入：
<input type="file" />
顾名思义，选择文件，并上传文件。
在万恶的旧时代，HTML5还没有出现之前，原生的file input表单元素只能让我们一次上传一张图片。无法满足一次上传多图的交互需求，所以，很多场景，就被swfupload.js给取代了，有点逐渐淡出人们视野的感觉。
然，技术发展，日新月异，三十年河东，三十年河西。随着原生HTML5表单对多图(multiple属性)、上传前预览，二进制上传等支持越来越广泛，原生的file input表单元素又迎来了新的升级，flash为背景的swfupload.js注定要落寞。
但是，对于PC项目，IE8-IE9浏览器还是不能忽略的。所以，现在，很流行的一种处理方式，就是HTML5 file上传和flash swfupload上传一起整合的模式，优先使用原生HTML5上传，不支持的，使用flash上传。我之前有篇关于HTML5上传的文章，每天访问量很高的：“基于HTML5的可预览多图片Ajax上传”，大家有兴趣可以看看。
如果想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢，就是：
enctype="multipart/form-data"
enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencoded“。对于普通数据是挺适用的，但是，对于文件，科科，就不能乱编码了，该什么就是什么，只能使用multipart/form-data作为enctype属性值。
无论是旧时代的单图上传，还是HTML5中的多图上传，均是如此。
文件，尤其图片，上场前能够预览，是很棒的交互体验。不走服务器，不耗费流量，多棒！
理想虽好，实现起来……
在HTML5还没出现的旧时代，只有低版本的IE浏览器貌似有方法，使用私有的滤镜，超越安全的限制（其实是利用了不好的东西），实现图片直接预览；但是呢，那个时候，Chrome, FireFox没有这一出，于是，想要使用原生file input实现图片的上传前预览，兼容性坎很难跨过去。
但是，后来，HTML5来了，我们出现了转机，IE10+以及其他现代浏览器，可以让我们直接读取图片的数据，然后在页面上呈现，实现了上传前预览；加上之前老IE的滤镜策略，貌似，可行。但是呢但是，老的IE浏览器只能最多一次选择一个文件，因此，只有单图上传的时候，大家可以考虑考虑。
传统的form提交，是要改变页面流的，也就是刷新后跳转。好的体验应该是走Ajax交互的。HTML5里面支持二进制formData数据提交，因此，可以从容Ajax提交上传的文件数据；那老旧的IE浏览器怎么办？
一般方法如下：
<form action="" method="post" enctype="multipart/form-data" target="uploadIframe">< <iframe id="uploadIframe"></iframe>
var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document; var response = doc.body && doc.body.innerHTML;
OK, 当然，你也可以不用像上面这么麻烦，直接使用jquery.form.js. 原理呢，就是上面这样，但是，不需要这么麻烦。
原生的file input不收待见的另外一个原因是：长的丑还不好控制。
举个例子，下图这个“选择文件”这几个文字，我们就不好对file控件动刀子实现自定义：
file input框
怎么办呢？
有一种方法是这样的： 让file类型的元素透明度0，覆盖在我们好看的按钮上。然后我们去点击好看的按钮，实际上点击是是file元素。
然而，此方法有一些不足：
更好的方法是，使用label元素与file控件关联，好处在于：
<label class="ui_button ui_button_primary" for="xFile">上传文件</label> <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>
效果如下（真实实时效果）：
input file类型控件有一个属性，名为
accept
, 可能有些小伙伴不太了解。可以用来指定浏览器接受的文件类型，也就是的那个我们打开系统的选择文件弹框的时候，默认界面中呈现的文件类型。例如：
accept="image/jpeg"
，则界面中只有jpg图片，如下截图，同时，窗体右下方是“自定义文件”按钮：
自定义文件
实际开发的时候，很少只允许传jpg图片，应该都是只能传图片类型，此时，可以使用：
accept="image/*"
于是乎，“自定义文件”按钮变成了语义更明确的“图片文件”：
图片文件
accept属性值其实是MIME类型, 例如下面几个可能常用的：
accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2"
然后，多个属性值使用逗号分隔，例如：
<input accept="audio/*,video/*,image/*">
现代浏览器直接value = "", 有些IE浏览器貌似不行，好像使用file.outerHTML = file.outerHTML，我自己没测试。
不过我觉得比较麻烦，还要判断浏览器什么的。像本文的Ajax单图上传，直接form.reset()就可以了。
以上~
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
我们浏览网页时可能需要把网页上的内容保存下来，这时候有几种方式可以做到：1、把重要的内容复制出来；2、对网页进行截图保存，我们推荐过的截图插件如印象笔记·剪藏、Full Page Screen Capture等；3、把网页保存成PDF，如Adobe Acrobat。4、直接把网页保存成HTML。当然所有浏览器都有另存页面为HTML 文档的功能，不过可能会遇到一些问题，保存后不是各种资源如JS、CSS和图片的文件很多，就是打开后无法载入样式表，图片显示不出来，要把网页备份起来或传送给别人就很麻烦。本文要介绍的SingleFile是一款免费浏览器扩展，可以将完整的页面保存到一个HTML文件中，包括所有CSS和图片等等，让用户即使在一个HTML文档中也能浏览完整内容。除了单一页面外，SingleFile还支持保存选中的部分、非固定标签页或所有页面，操作上也非常的简单易用。如果你有保存页面的需求，可以试试这款插件。
简介
SingleFile
*请认真填写需求信息，我们会在24小时内与您取得联系。
