• HTML5浏览器端图片预览&生成Base64


    原文地址:http://zhangyiheng.com/blog/articles/img_preview.html

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码。 工具链接:图片转Base64

    首先介绍一下FileReader, FileReader对象允许浏览器使用File或Blob对象异步读取存储在用户计算机上的文件(或数据缓冲区)的内容。

    有了FileReader就不需要先把文件发送到服务器端,然后再返回到浏览器端显示这种模式了,可以直接在浏览器端读取文件并显示。

    DND获取文件

    通过对DragAndDrop事件的监听获取文件。

    z.event.on(listDiv, "dragenter", this.preventAndStop, this);
    z.event.on(listDiv, "dragover", this.preventAndStop, this);
    z.event.on(listDiv, "drop", this.handleDrop, this);

    加dragenter和dragover监听主要是防止默认拖拽行为的发生,可以防止浏览器将当前页面变成浏览拖拽进来的图片内容。

    在drop事件监听中,可以通过dataTransfer获取拖拽到当前区域的文件列表。

    var dt = evt.dataTransfer;
    var files = dt.files;
    this.readFiles(files);

    FileReader读取文件

    通过FileReader对象读取文件, 因为FileReader读取文件是异步操作,所以通过onload事件回调来获取读取到的文件内容。

    var img = z.dom.create("img", "item");
    var reader = new FileReader();
    reader.onload = function (e) {
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);

    这样用户计算机中的图片文件,就可以在浏览器中预览看到了。

    在此通过文件的type做了一些过滤,只读取图片类型的文件,具体实现请参考完成代码。

    生成Base64

    FileReader读取到的内容,其实就是文件的Base64编码内容,可以直接通过img.src来访问。

    完整代码

    /**
     * Created by taozh on 2017/11/22.
     */
    var ToBase64 = {
        init: function () {
            this.initController();
        },
        initController: function () {
            var listDiv = z.dom.get("#listDiv");
            z.event.on(listDiv, "dragenter", this.preventAndStop, this);
            z.event.on(listDiv, "dragover", this.preventAndStop, this);
            z.event.on(listDiv, "drop", this.handleDrop, this);
            z.event.on(listDiv, "click", this.handleClick, this);
        },
        preventAndStop: function (evt) {
            evt.stopPropagation();
            evt.preventDefault();
        },
    
        handleDrop: function (evt) {
            this.preventAndStop(evt);
            var dt = evt.dataTransfer;
            var files = dt.files;
            this.readFiles(files);
        },
        readFiles: function (files) {
            var len = files.length;
            for (var i = 0; i < len; i++) {
                var file = files[i];
                var imageType = /image.*/;
    
                if (!file.type.match(imageType)) {
                    continue;
                }
                var img = this.addImage(file);
    
                if (i === 0) {
                    this.setCurrent(img);
                }
            }
        },
        addImage: function (file) {
            var that = this;
            var img = z.dom.create("img", "item");
            img.file = file;
            z.dom.attr(img,"title",file.name);
            z.dom.css(img, "display", "none");
            var span = z.dom.create("span");
            z.dom.get("#listDiv").appendChild(img);
    
            var reader = new FileReader();
            reader.onerror = function (stuff) {
                console.log("error", stuff);
                console.log(stuff.getMessage());
            };
            reader.onload = function (e) {
                img.src = e.target.result;
    
                z.util.callLater(function () {
                    var naturalHeight = img.naturalHeight;
                    var naturalWidth = img.naturalWidth;
                    if (naturalHeight > 0 && naturalWidth > 0) {
                        var m = Math.max(naturalWidth, naturalHeight) / 110;
                        z.dom.css(img, {
                             naturalWidth / m + "px",
                            height: naturalHeight / m + "px"
                        })
                    }
                    z.dom.css(img, "display", "inline");
                    if (that.__currentImg === img) {
                        z.dom.val("#dataPre", img.src);
                        img.scrollIntoView();
                    }
                }, 200);
            };
            reader.readAsDataURL(file);
            return img;
        },
        setCurrent: function (img) {
            if (this.__currentImg === img) {
                return;
            }
            if (this.__currentImg) {
                z.dom.removeClass(this.__currentImg, "active");
                z.dom.val("#dataPre", "");
            }
            this.__currentImg = img;
            if (img) {
                z.dom.cls(img, "active");
                z.dom.val("#dataPre", img.src);
            }
    
        },
        handleClick: function (evt) {
            var target = z.event.getTarget(evt);
            if (z.dom.hasClass(target, "item")) {
                this.setCurrent(target);
            }
        }
    
    };
    z.ready(function () {
        ToBase64.init();
    });
    View Code

    工具链接:图片转Base64

    工具效果图:

  • 相关阅读:
    转:jQuery选择器大全(48个代码片段+21幅图演示)
    转:Web 开发中很实用的10个效果【附源码下载】
    转:在网站开发中很有用的8个 jQuery 效果【附源码】
    转:35个让人惊讶的 CSS3 动画效果演示
    转:总结const、readonly、static三者的区别
    转:C# 深入理解堆栈、堆在内存中的实现
    推荐:Asp.Net MVC 多语言(html+js共用一套资源文件)
    转:HttpModule与HttpHandler详解
    转: ASP.NET MVC 多语言配置
    spring集合类型注入
  • 原文地址:https://www.cnblogs.com/zhtui/p/7883830.html
Copyright © 2020-2023  润新知