H5 实现图片上传预览
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>图片上传预览</title>
<style>
.check_box{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
display: flex;
flex-direction: row;
align-items: center;
}
#img_preview1{
display: block;
width: 100px;
height: auto;
}
input#zx_img1 {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
opacity: 0;
z-index: 9;
} </style>
</head> <body> <div class="check_box">
<img id="img_preview1" src="./images/add.png" alt="上传图片">
<input type="file" name="file" id="zx_img1" style="padding: 0px;" accept="image/jpeg, image/jpg, image/png, image/gif "
placeholder=" 上传文件">
</div>
<p>
图片大小支持50kb以内,支持拓展名:jpg,png,gif
</p> <!--引入jQuery插件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script>
$("#zx_img1").change(function (e) {
var file = e.target.files || e.dataTransfer.files;
if (file) { if (file[0] && (file[0].size / 1024).toFixed(0) > 50) {
console.log('你选择的文件太大，文件大小为：' + (file[0].size / 1024).toFixed(0) + "kb");
// return false
}
var reader = new FileReader();
reader.onload = function () {
console.log(this.result);
$("#img_preview1").attr("src", this.result);
}
reader.readAsDataURL(file[0]);
}
});
</script>
</body> </html>
H5 实现图片上传预览的更多相关文章
- 图片上传预览，兼容IE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- Javascript之图片上传预览
使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
随机推荐
- java线程入门一
线程优先级: 在JAVA线程中,通过一个int型变量priority来控制线程优先级,线程的有限机为1-10,默认为5,优先级高的线程获得的运行时间要高于优先级低的线程.但这只是一个提示,操作系统和J ...
- SQL-50 将employees表中的所有员工的last_name和first_name通过(')连接起来
题目描述 将employees表中的所有员工的last_name和first_name通过(')连接起来.CREATE TABLE `employees` (`emp_no` int(11) NOT ...
- html的基础属性
1.name属性: name用于指定标签元素的名称.<a>标签内必须提供href或name属性. 例子: <a name="value"> 2.id属性: ...
- s5p6818开发板uboot网络开通
手上的开发板网络默认是不通的,但是通过阅读uboot源码,发现uboot源码中,是有对这个网络的初始化的实现的函数的,只不过是没有调用而已,所以,要手动调用这个函数,把板子的网络调通: 首先是遇到了这 ...
- DD常用命令组合
管理一个系统经常需要备份磁盘数据,那么在UNIX/Linux系统中如何备份整个分区或整个硬盘的数据呢? dd命令就可以很方便实现这个功能. 1.把一个分区复制到一个文件中 dd if=/dev/sda ...
- Problem E: 平面上的点和线——Point类、Line类 (V)
Description 在数学上,平面直角坐标系上的点用X轴和Y轴上的两个坐标值唯一确定,两点确定一条线段.现在我们封装一个“Point类”和“Line类”来实现平面上的点的操作. 根据“append ...
- placeholder是H5的一个新属性，但是在IE9以下是不支持的
$(function() { // 如果不支持placeholder,用jQuery来完成 if(!isSupportPlaceholder()) { // 遍历所有input对象, 除了密码框 $( ...
- 计算1~100之间，能被3整除但是不能被7整除的数的和（C语言）
#include<stdio.h> int main(agrc *agrv) { int n,i; int sum=0; scanf("%d",&n); for ...
- Python面面面
1:Python有哪些特点和优点? 作为一门编程入门语言,Python主要有以下特点和优点: 可解释 具有动态特性 面向对象 简明简单 开源 具有强大的社区支持 当然,实际上Python的优点远不止如 ...
- Struts2 action 跳转到web-inf下，
初学,这个问题困扰了1天.刚开始以为代码或者是配置文件哪里写错了,仔细检查了好几遍确定代码没有错,实在没办法了,准备发帖求助.就在我截图的时候,突然发现我的@Action中有点别扭,即使他没有报错. ...