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的更多相关文章

  1. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  2. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  3. Jquery插件-Html5图片上传并裁剪

    /** * 图片裁剪 * @author yanglizhe * 2015/11/16 */ (function($){ /** * Drag */ var Drag={obj:null,init:f ...

  4. HTML5图片上传预览

    HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronou ...

  5. HTML5图片上传本地预览

    在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 我们可以通过以下方式来解决. 获取图片 通过 File ...

  6. [javascript]——移动端 HTML5 图片上传预览和压缩

    在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...

  7. 基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader

    (function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(thi ...

  8. html5 图片上传 预览

    <html><body><fieldset> <legend>测试</legend> <div class="form-gr ...

  9. html5图片上传时IOS和Android均显示摄像头拍照和图片选择

    最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为 ...

随机推荐

  1. whu oj 1551 Pairs （莫队算法）

    problem_id=1551">题目链接 题目大意: 给出的询问,求出这个区间的里 差小于等于 2 的数字的对数. 思路分析: 莫队算法. 然后分析一下. 假设添加了一个数字.那么就 ...

  2. ORA-00838: Specified value of MEMORY_TARGET is too small(转)

    1. 测试环境OS: RHEL5U5(32bit)DB: Oracle 11.2.0.3.0(32bit) 2.   异常原因. 2.1 oracle 11g默认sga_target为0,如下图, O ...

  3. SSH-Struts（两）—调节器(ActionServlet)

    第一部分介绍的博客Struts架构,下一节介绍中特定成分,这个博客是写Struts控制器ActionServlet. 扮演的角色 ActionServlet类是Struts的控制中心,全部来自于浏览器 ...

  4. IP地址和子网掩码

    A分类IP住址 在第一个领域值规模:0-127  默认子网掩码:255.0.0.0 B分类IP就拿地址的第一个字段值范围:128-191  默认的子网掩码255.255.0.0 C类IP地址的第一个字 ...

  5. python 架构简介（转）

    前言:   开发语言python  越来越火 ,作为开发比较火的语言,python 对网页等的支持也很好,当你想用python来写网页的时候你就要选择框架了.到底要选择呢什么样子的框架,最适合你的项目 ...

  6. JavaScript--基于对象的脚本语言学习笔记(三)

    事件处理器 1.一个数据校验表单的例程 <html> <head> <title>js练习</title> <meta http-equiv=&q ...

  7. cocos2d-x 3.1.1 学习笔记［4］GridActions 网格动画

    文章写的  http://blog.csdn.net/zhouyunxuan 老样子.见代码. //GridActions can only used on NodeGrid auto nodeGri ...

  8. 三个水杯 (bfs)

    给出三个水杯,大小不一,并且只有最大的水杯的水是装满的,其余两个为空杯子.三个水杯之间相互倒水,并且水杯没有标识,只能根据给出的水杯体积来计算.现在要求你写出一个程序,使其输出使初始状态到达目标状态的 ...

  9. HDU 1877 另一个版本 A+B

    另一个版本 A+B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  10. 开源搜索引擎Iveely 0.8.0

    开源搜索引擎Iveely 0.8.0 这是一篇博客,不是,这是一篇开源人的心酸和喜悦,没有人可以理解我们的心情,一路的辛酸一路的艰辛,不过还好,在大家的支持下,总算是终见天日,谢谢那些给予我们无私帮助 ...