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

<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. SQL Server2019数据库备份与还原脚本,数据库可批量备份

    前言 最近公司服务器到期,需要进行数据迁移,而数据库属于多而繁琐,通过图形化界面一个一个备份所需时间成本很大,所以想着写一个sql脚本来执行. 开始 数据库单个备份 数据库批量备份 数据库还原 数据库 ...

  2. Maven 依赖调解源码解析(一):开篇

    本文是系列文章<Maven 源码解析:依赖调解是如何实现的?>第一篇,主要做个开头介绍.并为后续的实验做一些准备.系列文章总目录参见:https://www.cnblogs.com/xia ...

  3. [luogu6466]分散层叠算法

    做法1 对于每一个询问,直接暴力在每一个序列中二分查询 时间复杂度为$o(nk)-o(k\log n)$ 做法2 将所有序列合并后排序,并对每一个元素预处理出每个序列中第一个大于等于其的元素(位置), ...

  4. [atAGC052D]Equal LIS

    令$f_{i}$表示以$i$为结尾的最长上升子序列,显然可以快速预处理 令$L=\max_{i=1}^{n}f_{i}$,当$L$为偶数,考虑如下构造-- 将所有$f_{i}\le \frac{L}{ ...

  5. .NET Core中的鉴权授权正确方式(.NET5)

    一.简介 前后端分离的站点一般都会用jwt或IdentityServer4之类的生成token的方式进行登录鉴权.这里要说的是小项目没有做前后端分离的时站点登录授权的正确方式. 一.传统的授权方式 这 ...

  6. [GYCTF2020]Easyphp

    知识点 反序列化pop链 反序列化字符逃逸 解题过程 www.zip 备份文件获取源码 审计代码构造pop链 <?php Class UpdateHelper{ public $id; publ ...

  7. CKAD认证中的部署教程

    在上一章中,我们已经学会了使用 kubeadm 创建集群和加入新的节点,在本章中,将按照 CKAD 课程的方法重新部署一遍,实际上官方教程的内容不多,笔者写了两篇类似的部署方式,如果已经部署了 kub ...

  8. springboot配置自动提示插件-IDEA

    社区版的IDEA编辑spring boot项目的properties或者yml文件不会自动提醒.可手动安装IDEA的插件解决. Setting >> Plugins >> 搜索 ...

  9. ant的xml解释

    ant必须以<project>开始和</project>结束 --project(父节点) --target(子节点) ---javac(孙节点) ---echo(孙节点)

  10. Maven pom常用plugins配置说明

    maven-compiler-plugin 编译Java源码,一般只需设置编译的jdk版本 <plugin> <groupId>org.apache.maven.plugins ...