原文：http://blog.csdn.net/niyingxunzong/article/details/16989947

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

2013-11-27 18:38 14483人阅读 评论(1) 收藏 举报
 分类：
HTMl input 框获得本地文件的路径

版权声明：本文为博主原创文章，未经博主允许不得转载。

分为两部分，自己去判断浏览器的类型，然后调用不同函数，一定要引入jQuery，上面是我的Jquery的路径

在IE低版本中可以直接获得文件路径，不过在高版本和firefox和chrome中是不允许的。那是个漏洞

这样就能实现不用上传就可以实现图片的实时预览了

1.IE内核的部分，IE10 没问题，别的没试，

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript" src="软件工程概论/软件工程实验原型/js/jquery-1.8.3.min.js"></script>
  7. <script type="text/javascript">
  8. var imgurl = "";
  9. function getImgURL(node) {
  10. var imgURL = "";
  11. var file = null;
  12. if(node.files && node.files[0] ){
  13. file = node.files[0];
  14. }else if(node.files && node.files.item(0)) {
  15. file = node.files.item(0);
  16. }
  17. //这种获取方式支持IE10
  18. node.select();
  19. imgURL = document.selection.createRange().text;
  20. alert(imgURL);
  21. var textHtml = "<img src='"+imgURL+"'/>";     //创建img标签用于显示图片
  22. alert(textHtml);
  23. $(".mark").after(textHtml);
  24. return imgURL;
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <div style="width:200px; height:210px; border:1px solid red;" id="show">
  30. <div class="mark"></div>
  31. </div>
  32. <br>
  33. <input type="file" value="上传文件" onchange="getImgURL(this)">
  34. </body>
  35. </html>

2.火狐和chrome浏览器，其实这个获得的文件路径不是我们能看懂的，它是一个对象，不过浏览器能解析，可能出于浏览器的安全考虑吧，本来不能显示文件路径

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript" src="软件工程概论/软件工程实验原型/js/jquery-1.8.3.min.js"></script>
  7. <script type="text/javascript">
  8. var imgurl = "";
  9. function getImgURL(node) {
  10. var imgURL = "";
  11. try{
  12. var file = null;
  13. if(node.files && node.files[0] ){
  14. file = node.files[0];
  15. }else if(node.files && node.files.item(0)) {
  16. file = node.files.item(0);
  17. }
  18. //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
  19. try{
  20. //Firefox7.0
  21. imgURL =  file.getAsDataURL();
  22. //alert("//Firefox7.0"+imgRUL);
  23. }catch(e){
  24. //Firefox8.0以上
  25. imgRUL = window.URL.createObjectURL(file);
  26. //alert("//Firefox8.0以上"+imgRUL);
  27. }
  28. }catch(e){      //这里不知道怎么处理了，如果是遨游的话会报这个异常
  29. //支持html5的浏览器,比如高版本的firefox、chrome、ie10
  30. if (node.files && node.files[0]) {
  31. var reader = new FileReader();
  32. reader.onload = function (e) {
  33. imgURL = e.target.result;
  34. };
  35. reader.readAsDataURL(node.files[0]);
  36. }
  37. }
  38. //imgurl = imgURL;
  39. creatImg(imgRUL);
  40. return imgURL;
  41. }
  42. function creatImg(imgRUL){   //根据指定URL创建一个Img对象
  43. var textHtml = "<img src='"+imgRUL+"'/>";
  44. $(".mark").after(textHtml);
  45. }
  46. </script>
  47. </head>
  48. <body>
  49. <div style="width:90px; height:110px; overflow:hidden; border:1px solid red;" id="show">
  50. <div class="mark"></div>
  51. </div>
  52. <br>
  53. <input type="file" value="上传文件" onchange="getImgURL(this)">
  54. </body>
  55. </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’ 中的文件路径(转载)的更多相关文章

  1. input type=file 上传文件样式美化（转载）

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  2. vue项目内嵌入到app input type=file 坑（文件上传插件）

    w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...

  3. javaWeb - 2 — ajax、json — 最后附：后台获取前端中的input type = "file"中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  4. uedit修改文件上传路劲，支持api文件接口

    首先修改一个东西ueditor/ueditor.config.js serverUrl: URL + "php/controller.php" 原来 serverUrl: &quo ...

  5. jquery判断 input type="file"上传文件是否为空

    要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...

  6. 如何获取input框type=file选中的文件对象（FileReader）

    $("input[type='file']").change(function() { var file = this.files[0]; if (window.FileReade ...

  7. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

  8. 上传文件时文件类型限制 <input id="File1" type="file" accept=""/>

    在做项目项目中经常需要上传文件,类型也就那几种.虽然在js中加了上传文件类型的限制,但是为了减少因为用户选择不当而造成的反复检验.可以在input标签上加上accept属性.这种限制只是优化了选择文件 ...

  9. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

随机推荐

  1. echarts图标相关

    图标类型参考地址: http://echarts.baidu.com/echarts2/doc/doc.html 知识点一: 堆叠柱状图与普通柱状图的区别在于: 堆叠柱状图 在series中需要设置  ...

  2. c#的二进制序列化组件MessagePack介绍

    c#的序列化有多种,我一般喜欢用第三方组件,一个公共组件要拿出来用,而且支持很多语言,甚至以此谋生,肯定有其优势. 有或者说存在必然有其合理性,经过几年开发,我更加喜欢第三方的东西,类似序列化的东西. ...

  3. 【TOJ 1545】Hurdles of 110m（动态规划）

    描述 In the year 2008, the 29th Olympic Games will be held in Beijing. This will signify the prosperit ...

  4. SHELL里执行HIVE导出文件处理成CSV文件

    #!/bin/bash #用途: #.当前目录的txt文件批量转csv #.制表符转逗号分隔符 #.NULL去除 #.删除WARN警告 for i in `ls ./*.txt` do sed -e ...

  5. 安装java 和 eclipse

    昨天安装eclipse出现个问题, 安装完了创建第一个项目目录的时候弹窗报错an ......什么什么, 百度一堆没有用,后来发现是jdk12不支持,换了jdk8就可以了, 然后eclipse安装py ...

  6. python中的数据类型之元组和字典

    一.元组:俗称不可变的列表,又被称为只读列表.元组用小括号括起来,里面可以放任何数据类型的数据,查询可以,循环也可以,切片也可以,但就是不能修改. 注意:如果元组中只有一个元素,一定要加一个逗号,否则 ...

  7. WHERE条件中or与union引起的全表扫描的问题

    说起数据库的SQL语句执行效率的问题,就不得不提where条件语句中的or(逻辑或)引起的全表扫描问题,从而导致效率下降. 在以往绝大多数的资料中,大多数人的建议是使用 union 代替 or ,以解 ...

  8. PHP中的面向对象魔术方法大全

    1.__construct  构造方法 2.__destruct  析构方法 3.__get 获取成员值 4.__set 设定成员值 5.__isset 判断成员值 6.__unset unset成员 ...

  9. 华为机试 求int型数据在内存中存储时1的个数

    题目描述 输入一个int型的正整数,计算出该int型数据在内存中存储时1的个数. 输入描述: 输入一个整数(int类型) 输出描述: 这个数转换成2进制后,输出1的个数 输入 5 输出 2 普通运算方 ...

  10. java基础day05---界面

    java基础day05---界面 1.GUI:图形用户界面(Graphics User Interface) 开发工具包AWT抽象窗口把工具箱===>swing 解决了awt存在的lcd问题== ...