zoukankan      html  css  js  c++  java
  • 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="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>
  • 相关阅读:
    2 数据库开发--MySQL下载(windows)
    Spring课程 Spring入门篇 3-1 Spring bean装配(上)之bean的配置项及作用域
    Spring课程 Spring入门篇 2-2 Spring注入方式
    Spring课程 Spring入门篇 2-1 IOC和bean容器
    maven课程 项目管理利器-maven 5-1 课程总结 1星(2018-11-08 07:19)
    maven课程 项目管理利器-maven 4-1 使用maven创建web项目 5星
    maven课程 项目管理利器-maven 3-10 maven聚合和继承 4星
    maven课程 项目管理利器-maven 3-9 maven依赖冲突 4星
    maven课程 项目管理利器-maven 3-8 maven依赖传递 4星
    maven课程 项目管理利器-maven 3-7 maven依赖范围 2星
  • 原文地址:https://www.cnblogs.com/shizhouyu/p/5039565.html
Copyright © 2011-2022 走看看