html5 图片上传版本1.0
1、代码如下：
/*
autor:shzihouyu
date:2015-12-11
ver:1.0
*/
var szyFile = {
fileDom:null,//html 文件上传控件
preview:null,//图片预览的区域
imgMaxSize:0,//图片大小
filterDom:[],//符合条件的元素
filterImgDataUrl:[],//图片的dataUrl数据
dragArea:null,//拖放区域
imgRegExp:function(f){
if(!/\.(jpg|jpeg|tmp|png|gif)$/i.test(f.name)){
alert('您上传的不是图片,请重新选择后上传！');
return false;
}
return true;
},
isSupport:function(){//浏览器支持情况
if(window.File && window.FileReader && window.FileList && window.Blob) {
return true;
} else {
return false;
}
},
select:function(e){//图片上传触发
var e = e || window.event;
var files = e.target.files || e.dataTransfer.files;
for(var i = 0, f; f = files[i]; i++){
if(f){
if(szyFile.imgRegExp(f)){
if(f.size > szyFile.imgMaxSize*1024){
alert('图片过大,您上传的图片大于'+szyFile.imgMaxSize+'KB');
return false;
}else{
szyFile.filterDom.push(f);
var reader = new FileReader();
reader.onload = (function(){
return function(e){
szyFile.preview.innerHTML = '<img src="'+ this.result +'"/>';
szyFile.filterImgDataUrl.push(encodeURIComponent(this.result));
};
})(f);
reader.readAsDataURL(f);
}
}
}
}
},
dropHandler:function(e){//拖放处理
e.stopPropagation();
e.preventDefault();
szyFile.select(e);
},
dragOverHandler:function(e){//拖放效果处理
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dragEffect = 'copy';
},
addDragArea:function(dom){//添加拖放区域
this.dragArea = dom;
},
getDataUrl:function(){//返回所有上传图片的列表
return this.filterImgDataUrl;
},
getLastDataUrl:function(){//返回最后一个上传的图片
return this.filterImgDataUrl[this.filterImgDataUrl.length-1];
},
getFileList:function(){//返回文件列表
return this.filterDom;
},
getFileLast:function(){//返回最后一个文件
return this.filterDom[this.filterDom.length-1];
},
fileOnchange:function(elm){//事件添加
elm.addEventListener('change', this.select, false);
},
fileValue:function(){//返回文件的value值
return this.fileDom.value;
},
init:function(dom,prev,maxL,dragFlg,dragDom){//file控件 预览区域 图片最大尺寸 是否支持拖拽 拖拽区域
if(dom) this.fileDom = dom;
if(prev) this.preview = prev;
if(maxL) this.imgMaxSize = maxL;
if(this.isSupport()){
this.fileOnchange(dom);
if(dragFlg){
if(dragDom){
this.dragArea = dragDom;
this.dragArea.addEventListener('drop', this.dropHandler, false);
this.dragArea.addEventListener('dragover', this.dragOverHandler, false);
}
}
}else{
alert('请先升级您的浏览器！');
}
}
}
2、用法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分段读取文件</title>
</head>
<body>
<input type="file" id="file"/>
<div class="prevw"> </div>
<div id="drag_area" style="width:300px;height:160px;text-align:center;font-size:20px;color:#333;padding-top:140px;border:4px solid #000;">
<span>把文件拖放到此处上传</span>
</div>
</body>
</html> <script src="szyH5File.js"></script>
<script type="text/javascript">
var dom = document.querySelector('#file');
var prev = document.querySelector('.prevw');
var drag = document.querySelector('#drag_area');
szyFile.init(dom,prev,500,true,drag);
</script>
html5 图片上传版本1.0的更多相关文章
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- Jquery插件-Html5图片上传并裁剪
/** * 图片裁剪 * @author yanglizhe * 2015/11/16 */ (function($){ /** * Drag */ var Drag={obj:null,init:f ...
- HTML5图片上传预览
HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronou ...
- HTML5图片上传本地预览
在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 我们可以通过以下方式来解决. 获取图片 通过 File ...
- [javascript]——移动端 HTML5 图片上传预览和压缩
在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...
- 基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader
(function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(thi ...
- html5 图片上传 预览
<html><body><fieldset> <legend>测试</legend> <div class="form-gr ...
- html5图片上传时IOS和Android均显示摄像头拍照和图片选择
最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为 ...
随机推荐
- Team Foundation Server 2015使用教程--默认团队成员添加
- 如何解决卸载McAfee时出现“处于托管模式时无法删除”问题(转)
问题现象: 这几天在为客户终端换装杀毒软件时出现这么一个问题:在控制面板的添加或删除程序里面将“McAfee VirusScan Enterprise和 McAfee AntiSpyware Ente ...
- ExtJS4 动态生成grid出口excel(纯粹的接待)
搜索相当长的时间,寻找一些样本,因为我刚开始学习的原因,大多数人不知道怎么用.. 他曾在源代码.搞到现在终于实现了主下载.. 表的采集格不重复下载一个小BUG,一个使用grid初始化发生的BUG 以下 ...
- JAVA学习笔记 -- JDBC及其应用
一个.准备工作 1.开放SQL Server服务与支持TCP/IP 进一步确认TCPport watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjk ...
- SQLServer-----SQLServer 2008 R2卸载
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVrZXdhbmd6aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- U盘启动盘安装Win7/9/10系统攻略
UltraISO制作U盘启动盘安装Win7/9/10系统攻略 U盘安装好处就是不用使用笨拙的光盘,光盘还容易出现问题,无法读取的问题.U盘体积小,携带方便,随时都可以制作系统启动盘. U盘建议选择8G ...
- /proc/mtd 各参数的含义 -- linux内核
经/proc虚拟文件系统读取MTD分区表:cat /proc/mtd mtd .name = raspi, .size = 0x00400000 (4M) .erasesize = 0x0001000 ...
- NYNU_省赛选拔题(8)
题目描述 一天萌萌哒孟孟学长去博物馆参观,他想看到更多的东西.博物馆可以表示为N × M细胞的一个矩形区域. “.”表示为路,“*”表示为墙壁,每个墙壁上面都挂有美丽的画卷.孟孟学长可以看到与他所在位 ...
- Hadoop 2.2.0 HA构造
在这篇文章中<Ubuntu和CentOS分布式配置Hadoop-2.2.0>介绍hadoop 2.2.0最主要的配置.hadoop 2.2.0中提供了HA的功能,本文在前文的基础上介绍ha ...