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

<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. redis异常:(error) MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk.

    (error) MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on d ...

  2. Python基础(sorted)

    arr1 = [1,2,3,-30,4,5,-6] arr2 = sorted(arr1)#sorted()函数就可以对list进行排序 arr3 = sorted(arr1,key=abs)#可以接 ...

  3. 到底谁才需要Service Mesh?

    本文是Service Mesh系列第1篇 随着云原生时代的来临,使用微服务架构的朋友们开始听到一个新的技术名词--Service Mesh(现在来说已经不算新了). 对于一项新技术的学习,总归绕不过两 ...

  4. 通过python来获取网页状态

    #!/usr/bin/python import sys,httplibfrom optparse import OptionParserusageString = "Usage: %pro ...

  5. CODING 项目协同 2.0 —— 让协作有条不紊

    本文为 CODING 高级产品经理王海明 在腾讯云 CIF 工程效能峰会上所做的分享.文末可前往峰会官网,观看回放并下载 PPT. 大家好,我是 CODING 高级产品经理王海明,今天与大家分享的是项 ...

  6. Hi3516开发笔记(四):Hi3516虚拟机编译uboot、kernel、roofts和userdata以及分区表

    若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/121572767红胖子(红模仿)的博文大全:开发技术集合( ...

  7. 洛谷 P5249 - [LnOI2019]加特林轮盘赌(期望 dp+高斯消元)

    题面传送门 期望真 nm 有意思,所以蒟蒻又来颓期望辣 先特判掉 \(P_0=0\) 的情况,下面假设 \(P_0\ne 0\). 首先注意到我们每次将加特林对准一个人,如果这个人被毙掉了,那么相当于 ...

  8. P5599【XR-4】文本编辑器

    题目传送门. 题意简述:给定长度为 \(n\) 的文本串 \(a\) 和有 \(m\) 个单词的字典 \(s_i\).\(q\) 次操作,每次求出字典内所有单词在 \(a[l,r]\) 的出现次数,或 ...

  9. R语言因子排序

    画图的时候,排序是个很重要的技巧,比如有时候会看下基因组每条染色体上的SNP的标记数量,这个时候直接做条形图是一种比较直观的方法,下面我们结合实际例子来看下: 在R环境下之际构建一个数据框,一列染色体 ...

  10. Java日期时间操作基础——包含JDK1.8时间操作新特性

    JDK1.7日期时间操作 示例小结 public class DateTest { public static final String FORMAT_DATE = "yyyy-MM-dd& ...