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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM