您的位置：首页 > Web前端 > HTML5

html5 图片上传版本1.0

2015-12-11 16:52 555 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航