2017/2/17本地上传图片展示(未向后台发送)
来源:互联网 发布:js获取input的name值 编辑:程序博客网 时间:2024/04/28 20:46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id="photo">
<div id="click" style="width: 200px; height: 200px; border: 1px solid #000;"></div>
<script>
document.getElementById('photo').addEventListener('change',function(e){
console.log(this)
var files = this.files;
console.log(files)
var img = new Image();
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(e){
console.log(e)
var mb = (e.total/1024)/1024;
if(mb>= 2){
alert('文件大小大于2M');
return;
}
img.src = this.result;
img.style.width = "80%";
document.getElementById('click').style.width="200px";
document.getElementById('click').style.height="200px";
document.getElementById('click').innerHTML = '';
document.getElementById('click').appendChild(img);
}
});
</script>
</body>
</html>
1 0
- 2017/2/17本地上传图片展示(未向后台发送)
- 向后台发送请求
- iOS向后台(PHP)发送多张图片(带进度条)
- c#: 向后台发送消息
- Angular向后台发送请求
- ajax向后台发送数组数据
- EasyUI向后台发送page和rows
- iOS 向后台发送json数据
- iOS向后台发送Json数据
- iOS 向后台发送json数据
- 以ajax方式向后台发送文件
- jquery通过ajax向后台发送(checkbox)数组,并在后台接收,(发送的数据是checkedbox)
- 使用jQuery向后台传送图片
- 网页展示本地图片
- 【20171127】HTML5 上传文件(向后台传base64Code--[将文件转成base64 字符串])
- Coolite(ExtJS)向后台Asp.net C#发送参数
- ExtJs使用Array向后台发送大量数据
- ExtJs使用Array向后台发送大量数据
- 网络高手DOS命令
- windows查询主机名命令
- jquery中on动态绑定阻止冒泡事件异常
- Android-OpenGL ES For Android lesson
- vue检测对象和数组的变化
- 2017/2/17本地上传图片展示(未向后台发送)
- Seafile - 自己动手搭建个人/团队/公司专属私有文件同步服务 (云存储网盘)
- 2102 9
- Java 排序之 插入排序
- android 自定义Toast显示风格顶部弹出自定义时间
- centOS7配置网路yum
- MySQL 一些重要的特性:
- android6.0 power按键深入分析
- Swift3.0 加密