html上传图片的预览功能实现
表单代码(仅取上传文件部分):
<input class="selectImg" style="position:absolute;opacity: 0;width:100px;height:100px;" type="file" name="coverChart" onchange="showImg(this)">
js代码:
// 图片预览
function showImg(obj) {
$(".doShow").css("background-image", "url('" + getObjectURL(obj.files[0]) + "')");
} // 不同浏览器获得图片url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file) ;
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file) ;
}
return url;
}
参考链接:https://blog.csdn.net/man_zuo/article/details/83115212
html上传图片的预览功能实现的更多相关文章
- js上传图片及预览功能
详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...
- nodejs实现本地上传图片并预览功能(express4.0+)
Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- jquery 上传图片即时预览功能
<script type="text/javascript"> jQuery.fn.extend({ uploadPreview: ...
- 上传图片带预览功能兼容IE和火狐等主流浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- URL.createObjectURL() 实现本地上传图片 并预览功能
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
随机推荐
- Go defer 原理和源码剖析
Go 语言中有一个非常有用的保留字 defer,它可以调用一个函数,该函数的执行被推迟到包裹它的函数返回时执行. defer 语句调用的函数,要么是因为包裹它的函数执行了 return 语句,到达了函 ...
- GitHub 12个实用技巧-从projiect项目管理、代码链接到博客wiki全过程
1 在GitHub.com上编辑代码 2 粘贴图片 3 美化代码 4 在PRs中巧妙关闭issues 5 链接到评论 6 链接到代码 7 灵活使用GitHub地址栏 8 创建复选框列表 9 在GitH ...
- 痞子衡嵌入式:再测i.MXRT1060,1170上的普通GPIO与高速GPIO极限翻转频率
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT1060/1170上的普通GPIO与高速GPIO极限翻转频率. 按照上一篇文章 <实测i.MXRT1010上的普通GP ...
- [loj150]挑战多项式
以NTT为运算基础,即默认支持在$o(n\log n)$的时间内多项式乘法 二次剩余:称$n$为模$p$意义下的二次剩余,当且仅当存在$x$使得$x^{2}\equiv n(mod\ p)$ 当$p$ ...
- [bzoj1280]卖猪
首先考虑猪无法流动,那么源点向每一个猪圈连猪圈中猪个数的边,每一个顾客向汇点连所需猪的边,每一个猪圈向能打开它的顾客连inf的边,跑最大流即可. 但考虑猪要流动,有一个十分巧妙地做法,将每一个顾客所有 ...
- [bzoj2257]瓶子和燃料
先考虑选出k个后答案最小会是多少,容易发现其实就是所有的gcd(就是$ax+by=gcd(a,b)$的推广)然后相当于要最大化gcd,反过来可以将所有数的约数都打上+1标记,+1标记不少于k个且最大的 ...
- .Net Crank性能测试入门
Crank 是微软新出的一个性能测试框架,集成了多种基准测试工具,如bombardier.wrk等. Crank通过统一的配置,可以转换成不同基准测试工具命令进行测试.可参考Bombardier Jo ...
- excel的表格数据插入到数据库
看到有excel保存insert的数据,自己照着教程弄了一下,可以的. 表格数据 接下来我们在d3的位置输入 =CONCATENATE("insert into user(code, nam ...
- [省选联考 2020 A 卷] 组合数问题
题意 [省选联考 2020 A 卷] 组合数问题 想法 自己在多项式和数论方面还是太差了,最近写这些题都没多少思路,看完题解才会 首先有这两个柿子 \(k*\dbinom{n}{k} = n*\dbi ...
- CSP-S2021 被碾压记
没啥好说的,不会 T3 这种贪心/dk,或者说我的贪心能力太拉跨导致 T3 这种基本的贪心都不会. 只能说,还好 CSP 不算省选.自爆了,根本没心情写游记. 希望大家不要因为我这次的失误而瞧不起我这 ...