原生js上传图片时的预览
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>checkbox -value </title>
<link rel="stylesheet" href="">
<script src='./jquery-1.7.1.min.js'></script>
<style type="text/css">
.showImg {} .showImg img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="main">
<label for="imgfile"><span class="fakeButton">Insert Images</span></label>
<!-- 下面为了避免中文,由上面替换 -->
<!-- <input type="file" accept="image/jpeg,image/png,image/gif" name="imgfile" id="imgfile" multiple value="Insert Image" onchange="javascript:setImagePreview();" style="position:absolute;clip:rect(0 0 0 0);"> -->
<input type="file" accept="image/jpeg,image/png,image/gif" name="imgfile" id="imgfile" multiple onchange="javascript:setImagePreview();">
<br />
<div id="showImg" class="showImg"></div>
</div>
<script type="text/javascript">
function setImagePreview() {
var imghtml = imgUrls();
if (imghtml === '111') {
window.alert('Notice', 'You can upload up to three photos');
return false;
}
$('#showImg').html(imghtml);
}
// 限制传递图片的张数
function imgUrls() {
var imgsrcs = getUrl();
var imghtml = '';
var len = imgsrcs.length;
if (len > 3) {
return '111';
}
for (var i = 0; i < len; i++) {
imghtml += '<img src=' + imgsrcs[i] + ' alt="you have selected"> ';
}
return imghtml;
} function getUrl() {
var obj = $('#imgfile')[0].files;
var len = obj.length;
var imgsrcs = [];
for (var i = 0; i < len; i++) {
imgsrcs[i] = getObjectURL(obj[i]);
}
//添加图片路径到img src中进行预览
//不同浏览器下的路径不同
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
} return imgsrcs;
}
</script>
</body> </html>
原生js上传图片时的预览的更多相关文章
- JS 上传图片时实现预览
网页中一张图片可以这样显示: <img src="http://www.letuknowit.com/images/wg.png"/>也可以这样显示:<img s ...
- JS上传图片本地实时预览缩略图
HTML 代码如下 <body> <table width="100%" border="0" cellspacing="0&quo ...
- 原生JS上传,实现预览并且兼容大部分IE
// 前提条件: ie浏览器模式下,用户要允许ie默认的加载项:以下兼容ie的方法才会生效 // 图片上传预览 IE是用了滤镜 function previewImage(file) { var MA ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...
- JS实现的图片预览功能
之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...
- OSS上传图片无法在线预览的解决方案
OSS上传图片无法在线预览的解决方案 最近在做的项目涉及到商品详情,由于前端用的flutter框架并且该详情为富文本,dart语言关于富文本的组件不是非常友好,当富文本中的图片无法在浏览器中直接预览的 ...
- 使用pdf.js在移动端预览pdf文档
pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
随机推荐
- python的__all__
用来暴露接口 控制 from xxx import * 的行为 代码中当然是不提倡用 from xxx import * 的写法的,但是在 console 调试的时候图个方便还是很常见的.如果一个模块 ...
- 循环匹配出图片地址(即src属性)
<script type="text/javascript"> //思路分两步:作者(yanue). //1,匹配出图片img标签(即匹配出所有图片),过滤其他不需要的 ...
- Object.keys(),Object.values() 用法
ES8新特性 Object.keys() 用法 返回键名组成的数组, let arr={ name:'js', sex:'body' } let keys=Object.keys(arr); cons ...
- 在Java应用中通过SparkLauncher启动Spark任务
本博客内容基于Spark2.2版本,在阅读文章并想实际操作前,请确保你有: 一台配置好Spark和yarn的服务器 支持正常spark-submit --master yarn xxxx的任务提交 老 ...
- 2019.03.23 Cookie
Cookie 曲奇饼干 哈哈哈.通俗的将,应该是发票. 因为http是无状态操作 当你访问服务器之后,应该会给你响应发票Cookie记录你访问了什么东西 便于下次再来查找吧,Cookie有时间的限 ...
- Laravel传值总结
Laravel传值:with,view(),compact方法一:with public function index() { $title = '文章标题1'; return view('artic ...
- 动手动脑(&课后实验):类和对象
1. 以下代码为何无法通过编译?哪儿出错了? 如果类提供了一个自定义的构造方法,将导致系统不再提供默认构造方法.而此时程序中已提供了一个有一个参数的构造函数,而定义对象时却没有参数,所以程序会报错. ...
- RNN通俗理解
让数据间的关联也被 NN 加以分析,我们人类是怎么分析各种事物的关联,?最基本的方式,就是记住之前发生的事情. 那我们让神经网络也具备这种记住之前发生的事的能力. 再分析 Data0 的时候, 我们把 ...
- JS引擎的执行机制
深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4 ...
- laravel更改默认的登录密码加密方式
laravel更改默认的登录密码加密方式 laravel 默认用的登录密码加密方式是: $password = Hash::make('password'); 而我平时用的密码加密方式是: $pa ...