dropZone 回显图片

初始化dropzone的图片信息

var dropVar = this;
var mockFile = {
    name: "myiamge.jpg", //需要显示给用户的图片名
    size: 12345, //图片尺寸
    height:200,
    width: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