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

<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. 问题 O: 寻找最大数(三)

    [提交][状态][讨论版] 题目描述 给出一个整数N,每次可以移动2个相邻数位上的数字,最多移动K次,得到一个新的整数. 求这个新的整数的最大值是多少. 输入 多组测试数据. 每组测试数据占一行,每行 ...

  2. 『学了就忘』Linux软件包管理 — 40、Linux系统软件包介绍

    目录 1.Linux系统软件包分类 2.源码包说明 3.二进制包说明 4.RPM包的优缺点 4.RPM包的两种安装方法 5.总结 1.Linux系统软件包分类 Linux系统下的软件包只有源码包和二进 ...

  3. k8s网络模型与集群通信

    在k8s中,我们的应用会以pod的形式被调度到各个node节点上,在设计集群如何处理容器之间的网络时是一个不小的挑战,今天我们会从pod(应用)通信来展开关于k8s网络的讨论. 小作文包含如下内容: ...

  4. scrapy获取汽车之家数据

    1.创建scrapy项目 >scrapy startproject scrapy_carhome 2.找到对应接口 3.创建爬虫文件 > cd scrapy_carhome\scrapy_ ...

  5. npm 配置 registry 以及使用 nrm

    由于众所周知的原因,我们的内网链接互联网时非常不稳定,速度慢而且经常下载失败.为了提高下载安装 npm 包的体验,很多人都会把 npm 的 registry 配置成国内镜像,我们一般用的比较多的就是淘 ...

  6. linux 同时执行多个命令及几个基础命令

    先后不同的命令用分号:隔开即可 基础命令: 1.cd 进入目录 /代表根目录,.代表当前目录,..代表上一级目录 2.ls 显示当前目录下的所有文件和文件夹 -F区分目录和文件,文件后边是*代表可执行 ...

  7. Protocol Buffer序列化Java框架-Protostuff

    了解Protocol Buffer 首先要知道什么是Protocol Buffer,在编程过程中,当涉及数据交换时,我们往往需要将对象进行序列化然后再传输.常见的序列化的格式有JSON,XML等,这些 ...

  8. 『学了就忘』Linux文件系统管理 — 59、使用fdisk命令进行手工分区

    目录 1.手工分区前提 (1)要有一块新的硬盘 (2)在虚拟机中添加一块新硬盘 2.手工分区 (1)查看Linux系统所有硬盘及分区 (2)手工分区:详细步骤 (3)保存手工分区 3.硬盘格式化 4. ...

  9. NOI2021 去不了记

    没错,由于某些 zszz 的原因,我是真的去不了了(指去不了 ZJ) Day -11 ~ -7 - 2021.7.12 - 2021.7.16 令人自闭的 ISIJ 终于结束了----From ycx ...

  10. ABC 210

    A 按题意模拟. scanf("%lld%lld%lld%lld",&n,&a,&x,&y); std::cout<<n * x - ( ...