html上传图片的预览功能实现
表单代码(仅取上传文件部分):
<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上传图片的预览功能实现的更多相关文章
- js上传图片及预览功能
详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...
- nodejs实现本地上传图片并预览功能(express4.0+)
Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- jquery 上传图片即时预览功能
<script type="text/javascript"> jQuery.fn.extend({ uploadPreview: ...
- 上传图片带预览功能兼容IE和火狐等主流浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- URL.createObjectURL() 实现本地上传图片 并预览功能
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
随机推荐
- Jenkins执行 remote SSH 命令
1.安装 SSH Pipeline Steps 插件 2.在凭据中添加remote server凭据,如下 3.Pipeline编写: def GetRemoteServer(ip){ def rem ...
- Python基础(类和实例)
class Point(object): def __init__(self,name,score): self.__name = name self.__score = score def prin ...
- 菜鸡的Java笔记 第三十二 - java 静态导入的实现
静态导入的实现 为了理解静态导入的操作产生的动机,下面通过一个具体的代码来观察 范例:现在有一个 Import 的类,这个类中的方法全部都是 static 方法 packa ...
- Nginx支持WebSocket反向代理
WebSocket是目前比较成熟的技术了,WebSocket协议为创建客户端和服务器端需要实时双向通讯的webapp提供了一个选择.其为HTML5的一部分,WebSocket相较于原来开发这类app的 ...
- 网络带宽和速度测试windows和linux用iperf工具
网络带宽和速度测试windows和linux用iperf工具 Iperf是一个网络性能测试工具.Iperf可以测试TCP和UDP带宽质量.Iperf可以测量最大TCP带宽,具有多种参数和UDP特性 ...
- <C#任务导引教程>练习八
//66,静态成员与非静态成员的访问方式using System;class Text{ public int x; public static int y;//静态数据成员 voi ...
- Github树型插件--Octotree
octotree 是一款chrome插件,用于将 GitHub 项目代码以树形格式展示,而且在展示的列表中,我们可以下载指定的文件,而不需要下载整个项目. 官网地址:https://www.octot ...
- 柯基数据通过Rainbond完成云原生改造,实现离线持续交付客户
1.关于柯基数据 南京柯基数据科技有限公司成立于2015年,提供一站式全生命周期知识图谱构建和运维.智能应用服务,致力于"链接海量数据,从大数据中挖掘智慧".帮助企业运用知识 ...
- ROS机器人开发实践1->SSH远程登录要点记录
1.有线网卡 设置 找到有线网络,点击设置,修改其中的IPv4的地址和子网掩码. 1 //地址 2 192.168.xxx.xxx 3 //子网掩码 4 255.255.255.0 点击应用 2.配置 ...
- R语言矩阵相关性计算及其可视化?
目录 1. 矩阵相关性计算方法 base::cor/cor.test psych::corr.test Hmisc::rcorr 其他工具 2. 相关性矩阵转化为两两相关 3. 可视化 corrplo ...