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. tp if condition in_array用法

    <if condition="in_array($vo['status'],[3])"> <a href="javascript:void(0);&qu ...

  2. Java中主线程如何捕获子线程抛出的异常

    首先明确线程代码的边界.其实很简单,Runnable接口的run方法所界定的边界就可以看作是线程代码的边界.Runnable接口中run方法原型如下: public void run(); 而所有的具 ...

  3. LightOJ 1023 Discovering Permutations 水题

    http://www.lightoj.com/volume_showproblem.php?problem=1023 题意:26字母全排列 思路:用next_permutation或者思维想一下都可以 ...

  4. 【BZOJ4837】LRU算法 [模拟]

    LRU算法 Time Limit: 6 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 小Q同学在学习操作系统中内存管理的 ...

  5. 边缘检测:Canny算子,Sobel算子,Laplace算子

    1.canny算子 Canny边缘检测算子是John F.Canny于 1986 年开发出来的一个多级边缘检测算法.更为重要的是 Canny 创立了边缘检测计算理论(Computational the ...

  6. fileinput 小计(显示历史上传图片)

    今天又需要,要求在选中某条记录后显示历史上传图片 上传控件是fileinput.js 想法:界面有上传图片的控件,重新加载控件,并加入历史上传图片地址 实现代码: var filepathArray ...

  7. 原生ES-Module在浏览器中的尝试

    其实浏览器原生模块相关的支持也已经出了一两年了(我第一次知道这个事情实在2016年下半年的时候) 可以抛开webpack直接使用import之类的语法 但因为算是一个比较新的东西,所以现在基本只能自己 ...

  8. H题 hdu 2520 我是菜鸟,我怕谁

    题目大意:http://acm.hdu.edu.cn/showproblem.php?pid=2520 我是菜鸟,我怕谁 Time Limit: 2000/1000 MS (Java/Others)  ...

  9. Struts2+Hibernate实现图书管理系统

    效果图 部分代码 Books.java package entity; import java.util.Date; public class Books { //书籍编号 private Strin ...

  10. linux驱动基础系列--Linux下Spi接口Wifi驱动分析

    前言 本文纯粹的纸上谈兵,我并未在实际开发过程中遇到需要编写或调试这类驱动的时候,本文仅仅是根据源码分析后的记录!基于内核版本:2.6.35.6 .主要是想对spi接口的wifi驱动框架有一个整体的把 ...