关于js的文件上传问题~

<!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】（不明觉厉）

FileUpload 对象

在 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过来的，不过，小渣迈向这圈还真是艰辛啊~~

posted @ 2016-10-02 09:47 编编渣渣阅读(2165) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

编编渣渣

关于js的文件上传问题~

FileUpload 对象

使用表单输入进行选择

读取文件

公告

　　使用表单输入进行选择