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

关于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="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 对象调用其中某一种读取方法后,可使用onloadstartonprogressonloadonabortonerror 和 onloadend 跟踪其进度。

下面的示例从用户选择的内容中过滤掉了图片,对文件调用reader.readAsDataURL(),并通过将“src”属性设为数据网址来呈现缩略图。


好吧,第一次打了这么多,虽说有许多是copy过来的,不过,小渣迈向这圈还真是艰辛啊~~

关于js的文件上传问题~