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

<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. Beyond compare 4.2.3 激活和秘钥

    安装完 Beyond Compare 4.2.3 以后.打开输入密匙是不是会跳到官网去?不用慌,我们只需要删除你安装Beyond Compare 4目录下的 BCUnrar.dll 文件,然后再打开就 ...

  2. 团队内部密码共享方案:KeePassXC+微盘(企业微信)

    目录 需求描述 适用场景 安装使用 KeePassXC初始化 浏览器插件安装设置 1.火狐 2.Edge 3.Chrome 软件-插件的链接 登陆网站并保存密码 (企业微信)微盘共享内部数据库 其他 ...

  3. Jenkins教程(八)实现 GitLab 触发 Jenkins 自动按模块发布前端

    楔子 上篇文章解决了提交/合并请求自动触发的需求,但所有前端模块都在同一个代码仓库里,如何获取变更文件路径确定要发布哪个模块呢?本文将带你解决这个问题. 思路 分别解决 3 个问题: 获取变更的文件列 ...

  4. 关于【【故障公告】数据库服务器 CPU 近 100% 引发的故障(源于 .NET Core 3.0 的一个 bug)】IS NOT NULL测试

    测试如图,Core_Users的PhoneNumber可为空,存在索引,记录数1500000+ 增加is not null,查询计划消耗增加了一个0%的筛选器消耗,IO消耗如下一模一样 如果是IS N ...

  5. [hdu6582]Path

    首先,从1和n跑一次dij,判断每一条边能否出现在最短路上,不能出现就删掉,然后将所有边建在图上,流量为边权,跑最小割即可. 1 #include<bits/stdc++.h> 2 usi ...

  6. [bzoj3123]森林

    首先对于询问操作可以使用可持久化线段树来维护,对于连边操作对于两颗树中选取较小的树暴力练到另一个点上,点数可以用并查集然后只修改根的点数即可. 1 #include<bits/stdc++.h& ...

  7. Java8-JVM内存区域划分白话解读

    前言 java作为一款能够自动管理内存的语言,与传统的c/c++语言相比有着自己独特的优势.虽然我们无需去管理内存,但为了防范可能发生的异常,我们需要对java内部数据如何存储有一定了解,已应对突发问 ...

  8. @Inject注解

    在看eureka的源码看到了这个注解,百度一下说这个和autowored差不多, import javax.inject.Inject;import javax.inject.Singleton; @ ...

  9. ICCV2021 | Swin Transformer: 使用移位窗口的分层视觉Transformer

    ​  前言  本文解读的论文是ICCV2021中的最佳论文,在短短几个月内,google scholar上有388引用次数,github上有6.1k star. 本文来自公众号CV技术指南的论文分享系 ...

  10. 深入理解Redis 数据结构—简单动态字符串sds

    Redis是用ANSI C语言编写的,它是一个高性能的key-value数据库,它可以作用在数据库.缓存和消息中间件.其中 Redis 键值对中的键都是 string 类型,而键值对中的值也是有 st ...