实时显示从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编辑方式 在对话框中输入数学公 ...
随机推荐
- tp if condition in_array用法
<if condition="in_array($vo['status'],[3])"> <a href="javascript:void(0);&qu ...
- Java中主线程如何捕获子线程抛出的异常
首先明确线程代码的边界.其实很简单,Runnable接口的run方法所界定的边界就可以看作是线程代码的边界.Runnable接口中run方法原型如下: public void run(); 而所有的具 ...
- LightOJ 1023 Discovering Permutations 水题
http://www.lightoj.com/volume_showproblem.php?problem=1023 题意:26字母全排列 思路:用next_permutation或者思维想一下都可以 ...
- 【BZOJ4837】LRU算法 [模拟]
LRU算法 Time Limit: 6 Sec Memory Limit: 128 MB[Submit][Status][Discuss] Description 小Q同学在学习操作系统中内存管理的 ...
- 边缘检测:Canny算子,Sobel算子,Laplace算子
1.canny算子 Canny边缘检测算子是John F.Canny于 1986 年开发出来的一个多级边缘检测算法.更为重要的是 Canny 创立了边缘检测计算理论(Computational the ...
- fileinput 小计(显示历史上传图片)
今天又需要,要求在选中某条记录后显示历史上传图片 上传控件是fileinput.js 想法:界面有上传图片的控件,重新加载控件,并加入历史上传图片地址 实现代码: var filepathArray ...
- 原生ES-Module在浏览器中的尝试
其实浏览器原生模块相关的支持也已经出了一两年了(我第一次知道这个事情实在2016年下半年的时候) 可以抛开webpack直接使用import之类的语法 但因为算是一个比较新的东西,所以现在基本只能自己 ...
- H题 hdu 2520 我是菜鸟,我怕谁
题目大意:http://acm.hdu.edu.cn/showproblem.php?pid=2520 我是菜鸟,我怕谁 Time Limit: 2000/1000 MS (Java/Others) ...
- Struts2+Hibernate实现图书管理系统
效果图 部分代码 Books.java package entity; import java.util.Date; public class Books { //书籍编号 private Strin ...
- linux驱动基础系列--Linux下Spi接口Wifi驱动分析
前言 本文纯粹的纸上谈兵,我并未在实际开发过程中遇到需要编写或调试这类驱动的时候,本文仅仅是根据源码分析后的记录!基于内核版本:2.6.35.6 .主要是想对spi接口的wifi驱动框架有一个整体的把 ...