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. 【题解】回文串 APIO 2014 BZOJ 3676 COGS 1985 Manacher+后缀数组+二分

    这题可以用回文自动机来做,但是我并没有学,于是用Manacher+SA的做法O(nlogn)水过 首先,看到回文串就能想到用Manacher 同样还是要利用Manacher能不重复不遗漏地枚举每个回文 ...

  2. zoj 2369 Two Cylinders

    zoj 2369 Two Cylinders 链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2369 题意:已知两个无 ...

  3. git 回退

    回退命令: $ git reset --hard HEAD^ 回退到上个版本$ git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退到n次提交之前 $ git rese ...

  4. mybatis 热部署xml文件(spring boot和springmvc两种方式)

    参考:http://thinkgem.iteye.com/blog/2304557 步骤:1.创建两个java类 (1)MapperRefresh.java   :用于刷新mapper (2)SqlS ...

  5. [Luogu 2146] NOI2015 软件包管理器

    [Luogu 2146] NOI2015 软件包管理器 树剖好题. 通过对题目的分析发现,这些软件构成一棵树,\(0\) 是树根. 每下载一个软件,需要下载根到这个软件的路径上的所有软件: 每卸载一个 ...

  6. Vuejs - 强大的指令系统

    在 Vuejs 中,指令(Directives)是带有 v- 前缀的特殊属性.指令属性的预期值是 单个 Javascript 表达式(v-for 是个例外).指令的职责是,当表达式改变时,将其产生的连 ...

  7. cookie、session、localstorage

    最早的Cookies问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.cookie的内容主要包括:名字,值,过期时间, ...

  8. ie8下input文字偏上select文字偏下

    1.ie8下input文字偏上 正常情况下input的显示情况如下 当设置input的高度时,就会出现文字不垂直居中偏上的情况,如图 解决方案 强input的行高line-height与其高度设置一致 ...

  9. perl中的lock

    #!/usr/bin/env perl -w use strict; use threads; use threads::shared; ; print "count的起始值为:$count ...

  10. js作用域与上下文

    作用域:与调用函数,访问变量的能力有关 作用域分为:局部和全局(在局部作用域里可以访问到全局作用域的变量,但在局部作用域外面就访问不到局部作用里面所设定的变量) 上下文:与this关键字有关 是调用当 ...