实时显示从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编辑方式 在对话框中输入数学公 ...
随机推荐
- 【题解】回文串 APIO 2014 BZOJ 3676 COGS 1985 Manacher+后缀数组+二分
这题可以用回文自动机来做,但是我并没有学,于是用Manacher+SA的做法O(nlogn)水过 首先,看到回文串就能想到用Manacher 同样还是要利用Manacher能不重复不遗漏地枚举每个回文 ...
- zoj 2369 Two Cylinders
zoj 2369 Two Cylinders 链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2369 题意:已知两个无 ...
- git 回退
回退命令: $ git reset --hard HEAD^ 回退到上个版本$ git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退到n次提交之前 $ git rese ...
- mybatis 热部署xml文件(spring boot和springmvc两种方式)
参考:http://thinkgem.iteye.com/blog/2304557 步骤:1.创建两个java类 (1)MapperRefresh.java :用于刷新mapper (2)SqlS ...
- [Luogu 2146] NOI2015 软件包管理器
[Luogu 2146] NOI2015 软件包管理器 树剖好题. 通过对题目的分析发现,这些软件构成一棵树,\(0\) 是树根. 每下载一个软件,需要下载根到这个软件的路径上的所有软件: 每卸载一个 ...
- Vuejs - 强大的指令系统
在 Vuejs 中,指令(Directives)是带有 v- 前缀的特殊属性.指令属性的预期值是 单个 Javascript 表达式(v-for 是个例外).指令的职责是,当表达式改变时,将其产生的连 ...
- cookie、session、localstorage
最早的Cookies问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.cookie的内容主要包括:名字,值,过期时间, ...
- ie8下input文字偏上select文字偏下
1.ie8下input文字偏上 正常情况下input的显示情况如下 当设置input的高度时,就会出现文字不垂直居中偏上的情况,如图 解决方案 强input的行高line-height与其高度设置一致 ...
- perl中的lock
#!/usr/bin/env perl -w use strict; use threads; use threads::shared; ; print "count的起始值为:$count ...
- js作用域与上下文
作用域:与调用函数,访问变量的能力有关 作用域分为:局部和全局(在局部作用域里可以访问到全局作用域的变量,但在局部作用域外面就访问不到局部作用里面所设定的变量) 上下文:与this关键字有关 是调用当 ...