实时显示从file输入框中打开的图片C:\fakepath路径问题
html代码:
<input id="file_upload" type="file" />
<div class="image_container">
<img id="preview" style="height:130px;width:117px;border-width:0px;"/>
</div>
jquery代码:
$(function () {
$("#file_upload").change(function () {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");
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");
// 两个坑:
// 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
// 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
});
});
转自
黄者之风
实时显示从file输入框中打开的图片C:\fakepath路径问题的更多相关文章
- 如何快速在命令提示符(cmd)中打开指定的文件夹路径!
按住shift键然后 右击,如图:
- input file获取选择图片的本地路径和base64路径
input file获取选择图片的本地路径和base64路径 本地路径: myHeadFile: function (e) { // 这里是input file 的onchange事件 ] const ...
- .project sturcture和Project Structure 无论是按快捷键或者是从files中打开都不显示
project sturcture和Project Structure 无论是按快捷键或者是从files中打开都不显示 event log中报:IllegalArgumentException:Mul ...
- 控制input输入框中提示信息的显示和隐藏的方法
在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐 ...
- vue中使用axios post上传头像/图片并实时显示到页面
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto ...
- excel表格中打开可以显示整个表格但是打印却只能打印一个单元格
excel表格中打开可以显示整个表格但是打印却只能打印一个单元格 如下图显示 解决办法 2007 版菜单栏上 ----->页面布局----->打印区域----->取消打印.即可正常. ...
- JS实时获取输入框中的值
实时获取input输入框中的值需要oninput和onpropertychange属性来实现.原因是onpropertychange属性为IE专属,而oninput属性支持大部分浏览器包括IE9及以上 ...
- iOS App让自己的应用在其它应用中打开列表中显示
像百度网盘等应用,里面的文件打开时,都能够通过以下应用再打开文件.以下红色框框内的我的jpg就是我做的一个样例. 由于样例没有提供Icon,所以显示的是默认icon. 以下就是这样例的主要步骤和代 ...
- Markdown中实时显示数学公式的方法
Markdown中实时显示数学公式的方法 Markdown非常好用,但是对于数学公式的实时显示有一些缺陷,如何解决这一问题呢? 一.在线LaTex编辑 点击在线LaTeX编辑方式 在对话框中输入数学公 ...
随机推荐
- 常见一个新的maven web工程
使用Eclipse创建一个新的maven Web应用工程,步骤如下: 1.在Elipse中新建一个maven工程,点击next: 2.选择工程路径(此处使用默认的),点击next: 3.选择Arche ...
- bzoj 2705: [SDOI2012]Longge的问题——欧拉定理
Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N). Input 一 ...
- [BZOJ1087][SCOI2005]互不侵犯King解题报告|状压DP
在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 好像若干月前非常Naive地去写过DFS... ...
- 【洛谷 P1525】 关押罪犯 (二分图+二分答案)
题目链接 并查集+贪心当然是可以做的. 但我用二分图+二分答案. 二分一个\(mid\),删去所有边权小于等于\(mid\)的边,看有没有奇环存在,如果存在,则\(mid\)不行. #include ...
- bzoj 2434 fail tree+dfs序
首先比较明显的是我们可以将字符串组建立ac自动机,那么对于询问s1字符串在s2字符串中出现的次数,就是在以s1结尾为根的fail tree中,子树有多少个节点是s2的节点,这样我们处理fail tre ...
- recycleView实现item点击更改该item颜色,其它item颜色变回
项目中需要横向滚动效果,按照以前的思路,我会写一个ScrollView,里边加一个LinearLayout,在代码中动态加入控件,然后动态删除或者改变颜色,现在android有了新控件Recycler ...
- 【转】linux下杀死进程
经过搜集和整理相关的Linux操作系统杀死进程的材料,在这里给大家推荐本篇文章,希望大家看后会有不少收获. 1. kill 作用:根据进程号杀死进程 用法: kill [信号代码] 进程ID 举例: ...
- linux 服务简介
Linux服务(Linux services)对于每个应用Linux的用户来说都很重要.关闭不需要的服务,可以让Linux运行的更高效,但并不是所有的Linux服务都可以关闭.今天安装了一次CentO ...
- monkey测试===ios-monkey测试工具
iOSmonkey测试工具: crashmonkey 特点: 支持**真机测试.模拟器测试** 支持收集**系统日志(Systemlog)**.**崩溃日志(Crashlog)**.***instru ...
- Android 开发之避免被第三方使用代理抓包
现象:charles抓不到包,但wireshark,HttpAnalyzor可以抓到包. 关键代码: URL url = new URL(urlStr); urlConnection = (HttpU ...