zoukankan      html  css  js  c++  java
  • dropZone 回显图片

    初始化dropzone的图片信息

    var dropVar = this;
    var mockFile = {
        name: "myiamge.jpg", //需要显示给用户的图片名
        size: 12345, //图片尺寸
        height:200,
        200,
        type: '.jpg,.png,.gif'//图片文件类型
    };
    dropVar.addFile.call (dropVar,mockFile);//添加mock图片到显示区域
    dropVar.options.thumbnail.call (dropVar,mockFile,"http://localhost:8181/dsp-mgr/assets/images/logo.png");//添加数据源给mock图片





    <script type="text/javascript">

        Dropzone.autoDiscover = false;

        var myDropzone = new Dropzone("#drop", {

            url: "/",//上传文件的地址,

            maxFiles: 1,//最多上传几个图片

            maxFilesize: 5,//图片的大小,单位是M

            addRemoveLinks:true,

            dictRemoveFile : "删除",

            dictCancelUpload: "取消",

            acceptedFiles: ".jpg,.jpeg,.png,.gif",//支持的格式

            paramName:"dropimage",//上传的FILE名称,即服务端可以通过此来获取上传的图片

            dictDefaultMessage: "<button class='btn btn-default btn-flat' type='button'>点击上传图片</button>",

            dictMaxFilesExceeded: "只能上传1个文件",

            init: function() {

                this.on("success", function(file,xhr) {

                    console.log(xhr);

                });

                this.on("removedfile", function(file) {

                    console.log("File " + file.name + "removed");

                });

            }

        });

    var mockFile = { name: "123.jpg", accepted:true };

    myDropzone.emit("addedfile", mockFile);

    myDropzone.emit("thumbnail", mockFile, "http://edms.kitesky.com/upload/image/20170422/52edf3c2aabf171315d968d9af814d0c.jpg");

    myDropzone.emit("complete", mockFile);

    <!-- myDropzone.options.maxFiles = myDropzone.options.maxFiles - 1; -->

    </script>

    dropzone 参考信息网站

    1 http://www.dropzonejs.com

    2 http://www.tuicool.com/articles/M36jI3m

    3 http://blog.csdn.net/yangxujia/article/details/36672917

  • 相关阅读:
    echarts常用说明
    ionic4打包和ngix配置
    浏览器onbeforeunload
    vue中keepAlive的使用
    面试题
    git使用
    git常用命令
    ajax原理
    关于npm(一)
    React、Vue、Angular对比 ---- 新建及打包
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/7060308.html
Copyright © 2011-2022 走看看