js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)
js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径

版权声明:本文为博主原创文章,未经博主允许不得转载。
分为两部分,自己去判断浏览器的类型,然后调用不同函数,一定要引入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
js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)的更多相关文章
- input type=file 上传文件样式美化(转载)
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
- vue项目内嵌入到app input type=file 坑(文件上传插件)
w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...
- javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕
1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...
- uedit修改文件上传路劲,支持api文件接口
首先修改一个东西ueditor/ueditor.config.js serverUrl: URL + "php/controller.php" 原来 serverUrl: &quo ...
- jquery判断 input type="file"上传文件是否为空
要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...
- 如何获取input框type=file选中的文件对象(FileReader)
$("input[type='file']").change(function() { var file = this.files[0]; if (window.FileReade ...
- <input type="file">上传文件并添加路径到数据库
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
- 上传文件时文件类型限制 <input id="File1" type="file" accept=""/>
在做项目项目中经常需要上传文件,类型也就那几种.虽然在js中加了上传文件类型的限制,但是为了减少因为用户选择不当而造成的反复检验.可以在input标签上加上accept属性.这种限制只是优化了选择文件 ...
- HTML <input type="file">上传文件——结合asp.net的一个文件上传示例
HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...
随机推荐
- Python—XML
什么是xml XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 XML 标签没有被 ...
- 如何解决mosh中翻页只能查看一屏的问题
最近用mosh替换了ssh作为连接开发机的工具,发现另外一个问题,ls cat随便什么命令输出结果超过一行的,向上翻页就没有了,找了下官网的FAQ也提到了这个问题,目前解决方案是使用tmux或者scr ...
- jenkins 安装配置: centos-master windows/linux-slave + nginx代理 + node + job
centos install jenkins: 1.sudo vi /etc/yum.repos.d/jenkins.repo [jenkins] name=Jenkins baseurl=http: ...
- 大专生自学web前端前前后后
先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...
- Dubbo源码分析之ExtensionLoader加载过程解析
ExtensionLoader加载机制阅读: Dubbo的类加载机制是模仿jdk的spi加载机制: Jdk的SPI扩展加载机制:约定是当服务的提供者每增加一个接口的实现类时,需要在jar包的META ...
- oracle https://localhost:1158/em 无法打开
解决办法一: 首先查看本机Oracle安装路径中 portlist.ini 文件里面的端口号是多少,例如我的就是5500. 那么在浏览器中输入的地址就是:https://localhost:5500/ ...
- mysql存储过程和函数(一)
存储过程和函数是事先经过编译并存储在数据库的一段sql语句集合,调用存储过程和函数可以简化应用程序开发人员的很多工作,减少数据在数据库和应用服务器之间的传输,对提高数据运行效率是有好处的. 存储过程和 ...
- 【前行】◇第3站◇ Codeforces Round #512 Div2
[第3站]Codeforces Round #512 Div2 第三题莫名卡半天……一堆细节没处理,改一个发现还有一个……然后就炸了,罚了一啪啦时间 Rating又掉了……但是没什么,比上一次好多了: ...
- JVM——Java内存区域
一,概述: Java跟C++不同,在内存管理区域C++程序员拥有着最高权力,但是正是因为如此,所以C++程序员要照顾这个对象的生老病死,从创建到消亡都是由程序员决定的. 但是Java程序员在虚拟机的自 ...
- 01-HTML深入
1.1 浏览器的工作原理 把一些标签解析成用户可视化的页面 1.2 HTML中的标签与元素 在HTML中以<xx>开始,以</xx>结束,比如<html>< ...