首页 > 代码库 > 关于js的文件上传问题~

关于js的文件上传问题~

2024-08-15 11:40:22   222人阅读

<!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="http://www.mamicode.com/再上传一个图片" /></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=http://www.mamicode.com/"" + path + "\")";//使用滤镜效果   
} else//FF  { 
path = imgFile.files[0].getAsDataURL(); 
document.getElementById("imgPreview").innerHTML = "<img id=‘img1‘ width=‘120px‘ height=‘100px‘ src=http://www.mamicode.com/‘"+path+"‘/>"; // document.getElementById("img1").src = http://www.mamicode.com/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 =http://www.mamicode.com/ 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() 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

兼容
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本支持8 [1]
23		4.0 (2)10156 [1]
7
In a Web Worker10 [1]
23		21 (21)11156 [1]
7


　　问题二：HTML5 提供的一种通过 File API 规范与本地文件交互的标准方式。
　　详请可见：http://www.html5rocks.com/zh/tutorials/file/dndfiles/
该规范通过“本地”文件系统提供了多种文件访问接口：
  1. File - 独立文件；提供只读信息，例如名称、文件大小、mimetype 和对文件句柄的引用。
  2. FileList - File 对象的类数组序列（考虑 <input type="file" multiple> 或者从桌面拖动目录或文件）。
  3. 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过来的，不过，小渣迈向这圈还真是艰辛啊~~
关于js的文件上传问题~






























        

            
                
                  
                
                

                    联系

                    我们