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>

 

posted @ 2015-12-11 16:52  史洲宇  阅读(281)  评论(0)  编辑  收藏  举报