表单代码(仅取上传文件部分):

<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上传图片的预览功能实现的更多相关文章

  1. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  2. nodejs实现本地上传图片并预览功能(express4.0+)

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...

  3. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  4. jquery 上传图片即时预览功能

    <script type="text/javascript">        jQuery.fn.extend({            uploadPreview: ...

  5. 上传图片带预览功能兼容IE和火狐等主流浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. URL.createObjectURL() 实现本地上传图片 并预览功能

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

  7. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  8. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  9. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

随机推荐

  1. 详解calc()函数功能

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...

  2. Python基础(序列化)

    #pickling import pickle,json # d = dict(name='傻狗1',age=300,score=100) # d1 = pickle.dumps(d)#pickle. ...

  3. [luogu3706]硬币游戏

    (可以参考洛谷4548,推导过程较为省略) 定义$g_{i}$表示随机$i$次后未出现给定字符串的概率,$f_{k,i}$表示随机$i$次后恰好出现$s_{k}$(指第$k$个字符串)的概率,设两者的 ...

  4. Aggregated APIServer 构建云原生应用最佳实践

    作者 张鹏,腾讯云容器产品工程师,拥有多年云原生项目开发落地经验.目前主要负责腾讯云 TKE 云原生 AI 产品的开发工作. 谢远东,腾讯高级工程师,Kubeflow Member.Fluid(CNC ...

  5. 低代码开发Paas平台时代来了

    概述 **本人博客网站 **IT小神 www.itxiaoshen.com 低代码理论 概念 低代码开发基于可视化和模型驱动的概念,结合了云原生和多终端体验技术,它可以在大多数业务场景中,帮助企业显著 ...

  6. Python之阶乘代码

    #coding=utf-8 while True:     num = int(input("请输入要阶乘的正整数数字,按负数退出:"))     jiec=1     if nu ...

  7. dart系列之:时间你慢点走,我要在dart中抓住你

    目录 简介 DateTime Duration 总结 简介 时间和日期是我们经常会在程序中使用到的对象.但是对时间和日期的处理因为有不同时区的原因,所以一直以来都不是很好用.就像在java中,为时间和 ...

  8. 洛谷 P5048 - [Ynoi2019 模拟赛] Yuno loves sqrt technology III(分块)

    题面传送门 qwq 感觉跟很多年前做过的一道题思路差不多罢,结果我竟然没想起那道题?!!所以说我 wtcl/wq 首先将 \(a_i\) 离散化. 如果允许离线那显然一遍莫队就能解决,复杂度 \(n\ ...

  9. 洛谷 P5471 - [NOI2019] 弹跳(二维线段树优化建图+堆优化存边)

    题面传送门 一道非常有意思的题(大概可以这么形容?) 首先看到这类一个点想一个区域内连边的题目可以很自然地想到线段树优化建图,只不过这道题是二维的,因此需要使用二维线段树优化建图,具体来说,我们外层开 ...

  10. Atcoder M-SOLUTIONS Programming Contest C - Best-of-(2n-1)(无穷级数求和+组合恒等式)

    Atcoder 题面传送门 & 洛谷题面传送门 无穷级数求和的简单题,稍微写写吧,正好也算帮我回忆下组合数这一块的内容. 首先我们不妨假设 A 赢,B 赢的情况就直接镜像一下即可.我们枚举 B ...