js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径
来源:互联网 发布:jira连接mysql 编辑:程序博客网 时间:2024/05/16 23:54
分为两部分,自己去判断浏览器的类型,然后调用不同函数,一定要引入jQuery,上面是我的Jquery的路径
在IE低版本中可以直接获得文件路径,不过在高版本和firefox和chrome中是不允许的。那是个漏洞
这样就能实现不用上传就可以实现图片的实时预览了
1.IE内核的部分,IE10 没问题,别的没试,
<!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=utf-8" /><title>无标题文档</title><script type="text/javascript" src="软件工程概论/软件工程实验原型/js/jquery-1.8.3.min.js"></script><script type="text/javascript">var imgurl = "";function getImgURL(node) {var imgURL = ""; var file = null; if(node.files && node.files[0] ){ file = node.files[0]; }else if(node.files && node.files.item(0)) { file = node.files.item(0); } //这种获取方式支持IE10 node.select(); imgURL = document.selection.createRange().text; alert(imgURL);var textHtml = "<img src='"+imgURL+"'/>"; //创建img标签用于显示图片alert(textHtml);$(".mark").after(textHtml);return imgURL;} </script></head><body> <div style="width:200px; height:210px; border:1px solid red;" id="show"> <div class="mark"></div> </div><br><input type="file" value="上传文件" onchange="getImgURL(this)"></body></html>
2.火狐和chrome浏览器,其实这个获得的文件路径不是我们能看懂的,它是一个对象,不过浏览器能解析,可能出于浏览器的安全考虑吧,本来不能显示文件路径
<!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=utf-8" /><title>无标题文档</title><script type="text/javascript" src="软件工程概论/软件工程实验原型/js/jquery-1.8.3.min.js"></script><script type="text/javascript">var imgurl = "";function getImgURL(node) {var imgURL = ""; try{ var file = null; if(node.files && node.files[0] ){ file = node.files[0]; }else if(node.files && node.files.item(0)) { file = node.files.item(0); } //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径 try{ //Firefox7.0 imgURL = file.getAsDataURL(); //alert("//Firefox7.0"+imgRUL); }catch(e){ //Firefox8.0以上 imgRUL = window.URL.createObjectURL(file);//alert("//Firefox8.0以上"+imgRUL); } }catch(e){ //这里不知道怎么处理了,如果是遨游的话会报这个异常 //支持html5的浏览器,比如高版本的firefox、chrome、ie10 if (node.files && node.files[0]) { var reader = new FileReader(); reader.onload = function (e) { imgURL = e.target.result; }; reader.readAsDataURL(node.files[0]); } }//imgurl = imgURL;creatImg(imgRUL);return imgURL;} function creatImg(imgRUL){ //根据指定URL创建一个Img对象var textHtml = "<img src='"+imgRUL+"'/>";$(".mark").after(textHtml);} </script></head><body> <div style="width:90px; height:110px; overflow:hidden; border:1px solid red;" id="show"> <div class="mark"></div> </div><br><input type="file" value="上传文件" onchange="getImgURL(this)"></body></html>
3.其余的浏览器。我没有测试,不过国内的其他如360和遨游,等都有两种模式,一种是IE内核,这(1)中可以运行,第二种内核没找到好方法
4.推荐出处
https://developer.mozilla.org/zh-CN/docs/DOM
http://www.w3.org/TR/FileAPI/#dfn-revokeObjectURL
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images
- js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径
- js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径
- JQuery------获取<input type="file">中的文件内容
- 关于input type=file 获取文件的路径问题
- 关于获取<input type='file'>获取文件的路径问题
- 获取 input file 文件域的路径
- 获取上传文件的路径input file
- <input type="file"/>如何获取判断获取文件后缀
- <input type="file">定义样式并获取上传文件路径及指定文件类型
- 如何获取input框type=file选中的文件对象(FileReader)
- 如何获取input type=file的路径
- jquery获取input type=file的选中上传文件名
- 关于jsp中<input type="file">获取路径问文件名,获取完全路径问题
- 关于jsp中<input type="file">获取路径问文件名,获取完全路径问题
- js 获取、清空 input type="file"的值
- js 获取、清空 input type="file"的值
- js获取input的文件
- [置顶]关于使用input type=file 标签上传文件的注意细节(上传文件 无法获取文件 问题)
- Gstreamer架构 简介
- Plus One
- 深入Phtread(三):线程的同步-Condition Variables
- C语言中数值的移位运算
- 分分钟实现梦想 —— 两种快速打造App的方法
- js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径
- Java之 求Fibonacci数列:1,2,3,5,8,13.。。。。前十位数的和
- 成为优秀程序员的方法就是抛开编程?
- 深入Pthread(四):一次初始化-pthread_once_t
- 单片空间后方交会程序设计(代码共享)
- gstreamer应用程序调试
- Python 代码性能优化技巧
- 深入Pthread(五):线程属性
- 黑马程序员---forward与redirect的区别