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="上传文件" οnchange="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="上传文件" οnchange="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
转载于:https://www.cnblogs.com/wenjie/p/6020159.html
js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)...相关推荐
- Input type=“file“上传文件change事件只触发一次解决方案
Input type="file"上传文件change事件只触发一次解决方案 参考文章: (1)Input type="file"上传文件change事件只触发 ...
- input type='file' 上传文件时显示文件名及上传进度
https://blog.csdn.net/qq_36687640/article/details/78551217 1.input type='file' 上传文件时显示文件名及上传进度 <i ...
- 用加号图标代替input type=file实现添加文件,清空input file
效果图如上,通过点击该加号图片可以实现input选择文件,原理即在该图片上面写了个input隐藏,在图片点击事件中添加input的模拟点击. <input class="mui-hid ...
- uedit修改文件上传路劲,支持api文件接口
首先修改一个东西ueditor/ueditor.config.js serverUrl: URL + "php/controller.php" 原来serverUrl: " ...
- AngularJS 双向绑定 input type='file'中文件名,文件内容
通过ng-model获取文件名,文件内容无效,这里用的都是双向绑定,但是双向绑定时参数传过去是undefined或者为空 <div ng-controller="getFileCtr ...
- 上传pdf文件转图片翻页小工具,遇到JSP form中type=file的文件上传及后台Part处理问题(后台取值为null)
最近公司要求做一个上传pdf文件后将文件转换为翻页图片的小工具,我是这么做的 1.先找图片翻页的demo,微软有现有的产品turn.js感兴趣的可以自己看一下 ,有双页的有单页的,因为我司要求手机端使 ...
- 使用input type=file 上传文件时需注意
在asp.net的中使用<input type='file' />控件上传文件对文件的大小有限制,默认情况下大概在4m左右,如果上传再大的文件时就会出页面无法显示的错误. 修改web.co ...
- Java中,File创建一个文件
import java.io.File; import java.io.IOException; /** * * 如何用File创建一个文件 */ public class test1 {public ...
- android file.renameto 不成功,Android中的file.renameTo(文件)可能出现什么问题
3 个答案: 答案 0 :(得分:3) 列出的三个是更可能的失败.不太可能(但可能!)失败包括 用户错误(例如,source是文件,目标是现有目录,反之亦然) 设备上没有剩余空间 文件系统挂载只读 损 ...
最新文章
- 如何提取edit control中输入的数据_如何在Power Query中提取数据——列表篇(1)
- sql时间转换时分秒_SQL数据库中的是年月日时分秒格式的,什么语句能实现年月日的查询?...
- BeyondCompare
- sgi 之heap, priority_queue
- CodeForces - 1311F Moving Points(线段树+离散化)
- 关于aop:pointcut的expression配制说明及JoinPoint
- python合并csv文件_Python学习——pandas 合并csv文件
- 详解vector容器(应用+模拟实现,vector相关练习题)
- php无法创建cookie,php cookie无法正常工作
- 机器学习的分类与主要算法
- 前端工程中使用iconfont图标
- python识别二维码条形码?用pyzbar一招搞掂(含代码)!
- JAVA之设置背景图片的几种方法
- js 操作字符串,
- python输入一个小数,提取整数部分
- digest 词根 gest
- IK-analyzer添加搜狗词库
- 解决方案:indexer -c sphinx.conf --all FATAL: out of memory (unable to allocat
- C++面向对象程序设计实践——任务与指导书(3)
- c语言控制数码管显示时间,单片机 控制 数码管显示
热门文章
- 第九届“图灵杯”NEUQ-ACM程序设计竞赛个人赛题解
- centos mysql压缩文件直接恢复_CentOS下利用mysqlbinlog恢复MySQL数据库
- nvidia-rapids︱cuGraph(NetworkX-like)关系图模型
- firefox ie 鼠标事件 坐标 兼容问题
- 【JZOJ6227】【20190621】ichi
- linux常用shell命令之文件操作命令
- 一些出的不错的Java面试题(一)
- [Lydsy1805月赛]对称数 BZOJ5361
- linux抓包工具:tcpdump 工具用法
- 第二阶段冲刺第八天,6月7日。