首页 > 代码库 > 关于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()
方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。
兼容
特性 | 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过来的,不过,小渣迈向这圈还真是艰辛啊~~
关于js的文件上传问题~