解决浏览器 fakepath 实现图片上传预览
fakepath是什么?
这是浏览器处于安全性考虑的,比如文件路径会暴露你的用户名或者其他内容,而通过fakepath直接代替了其中的路径名,保护隐私和安全。至于IE6为什么可以,这个就不用说了吧…
解决办法:工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”,选中“启用”即可。
但是这是需要用户去操作的啊,现在需要的是代码去解决.
代码解决
需要导入jQuery
js代码:
$(function() {$("#myfile").change(function() { // 更改对象-复用性var $file = $(this);var fileObj = $file[0];var windowURL = window.URL || window.webkitURL;var dataURL;var $img = $("#previewImg img"); // 更改对像-复用性if(fileObj && fileObj.files && fileObj.files[0]) {dataURL = windowURL.createObjectURL(fileObj.files[0]);$img.attr('src', dataURL);} else {dataURL = $file.val();var imgObj = document.getElementById("preview"); // 存放到要展示的dom// 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;// 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;}});});
html代码:
<form action="" method="post">请选择图片: <input id="myfile" name="myfile" type="file" value="" /><div id="previewImg"><img id="preview" src="" /></div>
</form>
封装后的灵活性更强
工具代码:
function getInputURL(file) {var url = null;if(window.createObjcectURL != undefined) {url = window.createOjcectURL(file);} else if(window.URL != undefined) {url = window.URL.createObjectURL(file);} else if(window.webkitURL != undefined) {url = window.webkitURL.createObjectURL(file);}return url;
}
使用:
$("#myfile2").change(function() {var file = this.files[0];var url = getInputURL(file); //blob:http://127.0.0.1:8020/f6b0f825-f59e-4f36-a470-db0ee8ba3906$("#preview2").attr({src:url});});
html代码:
<div class="row"><img id="preview2" src="" width="80px" height="80px" /><form action="" method="post">请选择图片: <input class="" id="myfile2" name="myfile2" type="file" value="" /></form><div id="large2">预览</div></div>
解决浏览器 fakepath 实现图片上传预览相关推荐
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- html 手机qq图片预览,模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- 图片上传预览的几种方式,了解下?
图片上传预览场景基本处处可见,朋友圈发动态配图,身份验证及头像更新,莫过如斯. 原由 最近在研究twitter PC网站的时候,在个人中心的主页,设置个人的背景图的时候,发现twitter有个非常好的 ...
- Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
- java 图片上传 预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
最新文章
- java 点允许没有反应 程序有main_我的java程序点击相应的button键没有反应?我想要实现的功能是点击“左齐”键,按钮左对齐,依此类推;...
- https://www.cnblogs.com/jingmoxukong/p/7755643.html
- 并查集 (Union-Find)算法
- 夏天到啦!你的mac过热怎么办?教你几招过热技巧~
- 同步I/O sync、fsync和fdatasync函数
- dcp7080d怎么加墨粉_兄弟7080加粉清零方法(兄弟dcp7080d加粉图解)
- VHDL——分频器设计
- Android WebView 选择图片并上传(调用相机拍照/相册/选择文件)
- Android新浪微博授权提示:文件不存在 C8998 的终极解决方法
- shell习题第15题:看数字找规律
- java导出excel自动计算公式
- 线性表——链表的应用
- html怎么设置下划线形状,科技常识:CSS如何给文字添加下划线样式
- 谈人生理想与个人实现
- A2 AP AUTOSAR 与 CP AUTOSAR 的特性
- CSS实现个性化水球图
- EI文献类型(Document Type)
- Flink中Trigger的介绍及使用
- JavaScript报错:xxx.filter is not a function
- Windows 系统做虚拟主机的安全设置
热门文章
- 计算机打印东西怎么横向打印机,打印机横向打印怎么设置,打印机不能横向打印...
- airpodspro没有弹窗_Airpods Pro开盖没有弹窗怎么办
- 【字体分享】来一波免费的漂亮英文手写体(上)
- 【架构】分布式架构介绍及实现(简略)
- 五胡十六国、东晋南北朝这280年历史,你知道多少?5000字带你看个清楚明白
- Unity2020打包ARCore项目apk
- 概率论-多维随机变量及其分布思维导图
- html 超出shengl,逃不掉(GL)作者:乔禾若
- multisim的汉化
- Java实现字符串逆序输出