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. stout代码分析之八:cache类

    stout中实现了LRU cache.cache的成员如下: public: typedef std::list<Key> list; typedef std::tr1::unordere ...

  2. bzoj 2086 [Poi2010]Blocks 单调栈

    [Poi2010]Blocks Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 788  Solved: 356[Submit][Status][Dis ...

  3. HDU 3277 最大流+二分

    Marriage Match III Time Limit: 10000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  4. 【Linux】NAT模式下关于主机ping不通虚拟机的问题

    今天打开虚拟机,然后用Xshell远程连接,发现连接不上.按照以下顺序检查了一遍. 1.虚拟机网络连接采用的是NAT模式 2.虚拟机IP采用的是自动获取.   IP:192.168.191.130 子 ...

  5. unity ugui缩放+移动

    本文仅仅记录自己在工作中踩到的ugui的坑.并讲述如何填的坑. 干货罗列在前,不愿意看的,拿东西走人,自己研究: RectTransform m_Rect m_Rect.localPosition m ...

  6. 【BZOJ3339&&3585】mex [莫队][分块]

    mex Time Limit: 20 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 有一个长度为n的数组{a1,a2,. ...

  7. 【LibreOJ】#538. 「LibreOJ NOIP Round #1」数列递推

    [题意]LibreOJ [算法]乱搞 [题解]容易发现数列最后一定单调,最后单调递增则最大值赋为最后一个,反之最小值赋为最后一个,然后处理一些细节就可以AC,要注意以下几点: 1.数列连续三项以及数列 ...

  8. 【洛谷 P1525】 关押罪犯 (二分图+二分答案)

    题目链接 并查集+贪心当然是可以做的. 但我用二分图+二分答案. 二分一个\(mid\),删去所有边权小于等于\(mid\)的边,看有没有奇环存在,如果存在,则\(mid\)不行. #include ...

  9. 24、redis中的sentinel的作用?

    redis中的sentinel的作用? Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕机了,Re ...

  10. Python模块学习 - Argparse

    argparse模块 在Python中,argparse模块是标准库中用来解析命令行参数的模块,用来替代已经过时的optparse模块.argparse模块能够根据程序中的定义从sys.argv中解析 ...