实时显示从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编辑方式 在对话框中输入数学公 ...
随机推荐
- 题解【luoguP3644 [APIO2015]八邻旁之桥】
题目链接 题解 家和公司在同侧 简单,直接预处理掉 若 \(k=1\) 取所有的居民的\(\frac{家坐标+公司坐标}{2}\)的所有坐标的正中间建一座桥,使所有居民到的距离最小. 实现方法:线段树 ...
- [技巧篇]00.TrimFilter去掉jsp页面空白,提升访问速度
最近感觉项目访问的速度有点慢,我就在网络中一顿搜索,发下了一个好东东,忍不住跟大家分享,希望大家可以试一试,确实有提升的空间啊!要求去除空白区.提取公用代码.减小页面. 胖先生乱搜之下,找到了Trim ...
- git如何删除本地所有未提交的更改
stash很好用,至少不会影响 .gitignore 里面的不跟踪的文件: git add . && git stash && git stash drop ===== ...
- Sublime Text 3 一些简单使用
1.注释 选中需要注释的代码,“Ctrl+/”单行注释,“Ctrl+Shift+/”多行注释.同样操作,可以取消注释. 2.查找 “Ctrl+F”,在底部会出现快速搜索框,在搜索框中输入需要搜索的变量 ...
- 九度OJ 1535 重叠的最长子串
重叠的最长子串 http://ac.jobdu.com/problem.php?pid=1535 时间限制:1 秒 内存限制:128 兆 题目描述: 给定两个字符串,求它们前后重叠的最长子串的长度,比 ...
- 【BZOJ】1699 [Usaco2007 Jan]Balanced Lineup排队
[算法]线段树 #include<cstdio> #include<cctype> #include<algorithm> using namespace std; ...
- 【BZOJ】1096 [ZJOI2007]仓库建设
[算法]DP+斜率优化 [题解]状态转移方程:f[i]=min(f[j]+g(i+1,j-1))+c[i] 关键在于如何O(1)计算g(i+1,j-1). 推导过程:http://blog.csdn. ...
- 2017ACM暑期多校联合训练 - Team 1 1001 HDU 6033 Add More Zero (数学)
题目链接 Problem Description There is a youngster known for amateur propositions concerning several math ...
- list互转datatable 支持Nullable转换
/// <summary> /// list转datatable /// </summary> /// <param name="list">& ...
- hdu 1599 find the mincost route (最小环与floyd算法)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1599 find the mincost route Time Limit: 1000/2000 MS ...