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路径问题的更多相关文章

  1. 如何快速在命令提示符(cmd)中打开指定的文件夹路径!

    按住shift键然后 右击,如图:

  2. input file获取选择图片的本地路径和base64路径

    input file获取选择图片的本地路径和base64路径 本地路径: myHeadFile: function (e) { // 这里是input file 的onchange事件 ] const ...

  3. .project sturcture和Project Structure 无论是按快捷键或者是从files中打开都不显示

    project sturcture和Project Structure 无论是按快捷键或者是从files中打开都不显示 event log中报:IllegalArgumentException:Mul ...

  4. 控制input输入框中提示信息的显示和隐藏的方法

    在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐 ...

  5. vue中使用axios post上传头像/图片并实时显示到页面

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码:   <div id="myPhoto ...

  6. excel表格中打开可以显示整个表格但是打印却只能打印一个单元格

    excel表格中打开可以显示整个表格但是打印却只能打印一个单元格 如下图显示 解决办法 2007 版菜单栏上 ----->页面布局----->打印区域----->取消打印.即可正常. ...

  7. JS实时获取输入框中的值

    实时获取input输入框中的值需要oninput和onpropertychange属性来实现.原因是onpropertychange属性为IE专属,而oninput属性支持大部分浏览器包括IE9及以上 ...

  8. iOS App让自己的应用在其它应用中打开列表中显示

    像百度网盘等应用,里面的文件打开时,都能够通过以下应用再打开文件.以下红色框框内的我的jpg就是我做的一个样例. 由于样例没有提供Icon,所以显示的是默认icon.   以下就是这样例的主要步骤和代 ...

  9. Markdown中实时显示数学公式的方法

    Markdown中实时显示数学公式的方法 Markdown非常好用,但是对于数学公式的实时显示有一些缺陷,如何解决这一问题呢? 一.在线LaTex编辑 点击在线LaTeX编辑方式 在对话框中输入数学公 ...

随机推荐

  1. JAVA中3种将byte转换为String的方法

    HttpClient 类库中GetMethod类的getResponseBody方法返回的是byte[]类型,要操作起来不方便,我想把它转化成String类型. 查了网上的资料,有说法认为用这种方法比 ...

  2. UOJ#179. 线性规划[模板]

    传送门 http://uoj.ac/problem/179 震惊,博主竟然还不会线性规划! 单纯形实在学不会啊……背个板子当黑盒用…… 学(chao)了NanoApe dalao的板子 #includ ...

  3. 51nod 1766 树上的最远点对——线段树

    n个点被n-1条边连接成了一颗树,给出a~b和c~d两个区间,表示点的标号请你求出两个区间内各选一点之间的最大距离,即你需要求出max{dis(i,j) |a<=i<=b,c<=j& ...

  4. 关于反序列化时抛出java.io.EOFException异常

    https://www.cnblogs.com/ouhaitao/p/7683568.html https://blog.csdn.net/mym43210/article/details/40081 ...

  5. 2018 Multi-University Training Contest 1-1002 -Balanced Sequence(括号匹配+贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6299 题目: 题意:t组数据,每组数据给你一个n表示给你n个括号串,这n个括号串之间进行组合,求能够匹 ...

  6. Little Mathematics Knowledge 数学小常识

    The sum of arithmetic sequence The sum of geometric sequence A special formula : n·n! = (n+1)! - n! ...

  7. pythonTensorFlow实现yolov3训练自己的目标检测探测自定义数据集

    1.数据集准备,使用label标注好自己的数据集. https://github.com/tzutalin/labelImg 打开连接直接下载数据标注工具, 2.具体的大师代码见下链接 https:/ ...

  8. CTSC/APIO2018 帝都一周游

    day0 报道 上午早早就起来了,两点才到酒店,然后去简单试了试机子. 不得不说今年八十中的伙食变得瓜皮了啊,去年还是大叠的5元卷,今年变成了单张的*餐卷.不知道食堂吝啬什么,面条米饭都只有一点点,还 ...

  9. Linux内核的架构

    GNU/Linux操作系统架构 备注:IPC进程间通.IPC(Inter-Process Communication)是共享"命名管道"的资源,它是为了让进程间通信而开放的命名管道 ...

  10. Linux NAPI/非NAPI

    本文主要介绍二层收包流程,包括NAPI与非NAPI方式: NAPI:数据包到来,第一个数据包产生硬件中断,中断处理程序将设备的napi_struct结构挂在当前cpu的待收包设备链表softnet_d ...