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:/ ...
随机推荐
- solrcloud jsonfacet分组聚合 unique计数不准确
jsonfacet分组聚合查询 unique.hll函数问题: 对不同的值进行估算,并非准确的值, 优点:节省内存消耗,用分组算法对不同的值count进行估算 缺点:无法准确统计count(disti ...
- LeetCode 57 插入区间
题目: 给出一个无重叠的 ,按照区间起始端点排序的区间列表. 在列表中插入一个新的区间,你需要确保列表中的区间仍然有序且不重叠(如果有必要的话,可以合并区间). 示例 1: 输入: intervals ...
- java8 stream lambda 一个例子
import java.io.File; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Pa ...
- Codeforces Round #162 (Div. 1) B. Good Sequences (dp+分解素数)
题目:http://codeforces.com/problemset/problem/264/B 题意:给你一个递增序列,然后找出满足两点要求的最长子序列 第一点是a[i]>a[i-1] 第二 ...
- Protege4.3 添加Rules 栏
SWRL rules can be edited in Protégé 4, but not with a nice interface like in Protégé 3. If you go to ...
- java面向对象编程（七）--四大特征之多态
1.多态概念 多态性是对象多种表现形式的体现.比如我们说"宠物"这个对象,它就有很多不同的表达或实现,比如有小猫.小狗.蜥蜴等等.那么我到宠物店说"请给我一只宠物&quo ...
- C# 保存屏幕截图
//屏幕宽 int iWidth = Screen.PrimaryScreen.Bounds.Width; //屏幕高 int iHeight = Screen.PrimaryScreen.Bound ...
- Laravel写讯搜的ini配置文件的一处陷阱
讯搜客户端在连接服务端之前需要读取配置文件里的配置信息. 配置文件里, 我一开始这样写: server.index = 127.0.0.1:8383 ; 表示索引接口 server.search = ...
- Linux 驱动——Button驱动7（Timer）消抖
button_drv.c驱动文件: #include <linux/module.h>#include <linux/kernel.h>#include <linux/f ...
- 两款不错的Linux密码生成工具
先介绍最简单的方法,Linux自带的 $ strings /dev/urandom | | ; echo whucNWhr35W6ZP0MxrLQ $ /dev/random | base64 | t ...