标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>上传图片</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTable">
<tr id="row1">
<td style="text-align:right; height:25px;">图片路径：</td>
<td><input name="fileImages" type="file" onchange="ShowImg(this.value);"/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="imgs">
<tr>
<img id="myImg" src="file:///F|/临时/temp/draw photo/001e4fc48be554.jpg"/>
</tr>
<tr>
<td style="text-align:center; height:30px;">
<input name="up" type="button" value="再上传一个图片" /></td>
</tr>
</table>
</body>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
function ShowImg(file_url){
alert(file_url);
$("myImg").setAttribute("src",file_url);
</script>
</html>
做作业时，需要实现上传图片浏览的功能，不却怎么也无法获取文件的完全路径，上网了解了下，发现JavaScript是无法直接或者客户端的文件，（(⊙v⊙)嗯，可以，很安全，不会随便地就被别人通过网页获得PC文件）。但是~~~w(?Д?)w我特喵的要怎么完成这个功能啊？
上网搞到了代码：
if(document.all)/*IE （这里得要讲一下，有些浏览器都有了document.all,虽然我的测试结果能辨别出来Ie，还有其他办法window.attachEvent【根据ie支持window.attachEvent添加侦听事件，非ie用window.addEventListener添加侦听事件来判断的】，网上有人说opera浏览器能伪装成ie，于是得用navigator.userAgent.indexOf(‘Opera‘) === -1）再加判断 +_+ */
{
imgFile.select(); path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘,sizingMethod=‘scale‘,src=\"" + path + "\")";//使用滤镜效果
} else//FF {
path = imgFile.files[0].getAsDataURL();
document.getElementById("imgPreview").innerHTML = "<img id=‘img1‘ width=‘120px‘ height=‘100px‘ src=‘"+path+"‘/>"; // document.getElementById("img1").src = path;
}
于是乎就继续搞；
网上资源：
【W3C】（不明觉厉）
在 HTML 文档中 <input type="file"> 标签每出现一次，一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称，但是当包含一个 file-upload 元素的表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
为安全起见，file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略，并且对于此类元素来说，value 属性是只读的，这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名，file-upload 元素触发 onchange 事件句柄。
您可以通过遍历表单的 elements[] 数组，或者通过使用 document.getElementById()来访问 FileUpload 对象。
【基本原理】
图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。
程序有以下几种预览方式：
simple模式：直接从file的value获取图片路径来显示预览，适用于ie6；
filter模式：通过selection获取file的图片路径，再用滤镜来显示预览，适用于ie7/8；
domfile模式：调用file的getAsDataURL方法获取Data URI数据来显示预览，适用于ff3；
remote模式：最后的办法，把file提交后台处理后返回图片数据来显示预览，全适用。
【实验效果】
simple模式：自己小小测试了下，发现在IE中（IE10）下可以直接获得file.value的完全路径（(￣_,￣ )呵呵~），其他的浏览器都会加密。
filter模式：(╯‵□′)╯︵┻━┻特喵的压根没搞到什么！！浪费我时间么！？
domfile模式：就是针对getAsDataURL方法，办法getAsDataURL（）可以取得用户所选文件的本地路径，然则这个路径的字符串文本被FireFox加密了，并且这段密文只能被FireFox辨认，其它的浏览器不克不及辨认，也就是说我将被加密后的路径直接赋值给一个img标签的src属性，在FireFox中是可以直接显示出的，而在IE中却不可。（这东西好像只能用在Firefox）
新版本的火狐7不认识getAsDataURL()，凸(艹皿艹 )（what the F！？）那该怎么办？
if(file)alert("file exiting!"); if(file.files)alert("file.files exiting!"); if(file.files.item(0))alert("file.files.item(0) exiting!"); var url = window.URL.createObjectURL(file.files[0]); if(url)alert("window.URL.createObjectURL(file.files[0]) is work!");
remote模式：不过这个this.files属性好像是HTML5的，ie8不兼容~~~没试过，不过至少解决我当前的燃眉之急；（还有，那个src）
function ShowImg(file){ if(typeof FileReader == "undefined") alert("浏览器不支持FileReader对象！"); else alert("浏览器支持FileReader对象！"); var read = new FileReader(); read.readAsDataURL(file[0]); read.onload = function(e){ var src = e.target.result; $("myImg").setAttribute("src",src); }
【问题拓展】
问题一：在domfile模式下，getAsDataURL（）过了Firefox7就不好用了（我不清楚是不是，反正现下的就没反应），那么我们加的那个window.URL.createObjectURL(file.files[0]) 是什么来着呢？
立马搜一下：
概述
URL.createObjectURL() 静态方法会创建一个 DOMString，它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示着指定的 File 对象或者 Blob 对象。
语法
objectURL = URL.createObjectURL(blob);
注意
在每次调用createObjectURL()方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用URL.revokeObjectURL()方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
兼容
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本支持 | 8 [1] 23 |
4.0 (2) | 10 | 15 | 6 [1] 7 |
In a Web Worker |
10 [1] 23 |
21 (21) | 11 | 15 | 6 [1] 7 |
问题二：HTML5 提供的一种通过 File API 规范与本地文件交互的标准方式。
详请可见：http://www.html5rocks.com/zh/tutorials/file/dndfiles/
该规范通过“本地”文件系统提供了多种文件访问接口：
File - 独立文件；提供只读信息，例如名称、文件大小、mimetype 和对文件句柄的引用。FileList - File 对象的类数组序列（考虑 <input type="file" multiple> 或者从桌面拖动目录或文件）。Blob - 可将文件分割为字节范围。 要加载文件，最直接的方法就是使用标准 <input type="file"> 元素。JavaScript 会返回选定的 File 对象 的列表作为 FileList。也可以用别的方法，像是添加监听：：dropZone.addEventListener(‘dragover‘, handleDragOver, false);（具体自己去搜啦w(?Д?)w）
获取了 File 引用后，实例化 FileReader 对象，以便将其内容读取到内存中。加载结束后，将触发读取程序的 onload 事件，而其 result 属性可用于访问文件数据。
FileReader 包括四个异步读取文件的选项：
FileReader.readAsBinaryString(Blob|File) - result 属性将包含二进制字符串形式的 file/blob 数据。每个字节均由一个 [0..255] 范围内的整数表示。FileReader.readAsText(Blob|File, opt_encoding) - result 属性将包含文本字符串形式的 file/blob 数据。该字符串在默认情况下采用“UTF-8”编码。使用可选编码参数可指定其他格式。FileReader.readAsDataURL(Blob|File) - result 属性将包含编码为数据网址的 file/blob 数据。FileReader.readAsArrayBuffer(Blob|File) - result 属性将包含ArrayBuffer 对象形式的 file/blob 数据。对您的 FileReader 对象调用其中某一种读取方法后，可使用onloadstart、onprogress、onload、onabort、onerror 和 onloadend 跟踪其进度。
下面的示例从用户选择的内容中过滤掉了图片，对文件调用reader.readAsDataURL()，并通过将“src”属性设为数据网址来呈现缩略图。
好吧，第一次打了这么多，虽说有许多是copy过来的，不过，小渣迈向这圈还真是艰辛啊~~标签：
原文地址：http://www.cnblogs.com/bbzz/p/js_files.html
