URL.createObjectURL() 实现本地上传图片 并预览功能
URL.createObjectURL() 静态方法会创建一个 DOMString
,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document
绑定。这个新的URL 对象表示指定的 File
对象或 Blob
对象。
mdn传送门:https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
<input class="avatarCon" type="file" />
<div class="showImg">
<img src="" alt="" />
</div>
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;
}
var avatarInput = $('.avatarCon');
avatarInput.change(function(event) {
var myPic = $(this).get(0).files[0];
$('.showImg img').attr('src',getObjectURL(myPic));
});
URL.createObjectURL() 实现本地上传图片 并预览功能的更多相关文章
- nodejs实现本地上传图片并预览功能(express4.0+)
Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...
- js上传图片及预览功能
详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...
- html上传图片的预览功能实现
表单代码(仅取上传文件部分): <input class="selectImg" style="position:absolute;opacity: 0;width ...
- jquery 上传图片即时预览功能
<script type="text/javascript"> jQuery.fn.extend({ uploadPreview: ...
- 上传图片带预览功能兼容IE和火狐等主流浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- jquery解决file上传图片+图片预览
js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...
随机推荐
- 基本环境安装: Centos7+Java+Hadoop+Spark+HBase+ES+Azkaban
1. 安装VM14的方法在 人工智能标签中的<跨平台踩的大坑有提到> 2. CentOS分区设置: /boot:1024M,标准分区格式创建. swap:4096M,标准分区格式创建. ...
- 小数点保留n位有效数字
char *psf = "183.0000000000000001"; ]; sprintf(chBuff, "%.2lf", atof(psf)); doub ...
- [模板] 虚树 && bzoj2286-[Sdoi2011]消耗战
简介 虚树可以解决一些关于树上一部分节点的问题. 对于一棵树 \(T\) 的一个子集 \(S\), 可以在 \(O(|S| \log |S|)\) 的时间复杂度内求出 \(S\) 的虚树. 虚树包括根 ...
- python之内置函数(一)
一.内置函数一1.内置函数总览 abs() dict() help() min() setattr()all() dir() hex() next() slice() any() divmod() i ...
- BZOJ3028食物——生成函数+泰勒展开
题目描述 明明这次又要出去旅游了,和上次不同的是,他这次要去宇宙探险!我们暂且不讨论他有多么NC,他又幻想了他应 该带一些什么东西.理所当然的,你当然要帮他计算携带N件物品的方案数.他这次又准备带一些 ...
- https://oi-wiki.org/
OI网站 https://oi-wiki.org/
- jquery cookie问题
近期工作中遇到了jquery cookie解决问题,顺便记录下: <div id="submenu"> <ul> <li><a id=&q ...
- <六>企业级开源仓库nexus3实战应用–使用nexus3配置yum私有仓库
一两个星期之前,你如果在我跟前说起私服的事情,我大概会绕着你走,因为我对这个东西真的一窍不通.事实上也正如此,开发同学曾不止一次的跟我说公司的私服版本太旧了,许多新的依赖编译之后不会从远程仓库自动缓存 ...
- require.js使用教程
require.js使用教程 下载require.js, 并引入 官网: http://www.requirejs.cn/ github : https://github.com/requirejs/ ...
- hotplug/mdev机制
目录 hotplug/mdev机制 框架 kobject_uevent_env mdev_main make_device mdev.conf 配置文件学习 更改属性 @:创建设备节点之后执行命令 $ ...