$(function() {
    // 表单提交
    $('.ajax-post').click(function(){
        console.log($('#example-from').serialize());
    });
  
    // 默认使用情况
    $("#example-dropzone").dropzone({
        url: "http://example.itshubao.com/index/test/upload/type/dropzone",
        dictDefaultMessage: '拖动文件至此或者点击上传',
        method: "post",  // 也可用put
        paramName: "file", // 默认为file
        maxFiles: 1,// 一次性上传的文件数量上限
        maxFilesize: 2, // 文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
        addRemoveLinks: true,
        parallelUploads: 1,// 一次上传的文件数量
        dictDefaultMessage: '拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传1个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init: function () {
            this.on("addedfile", function (file) {
                // 上传文件时触发的事件
            });
            this.on("success", function (file, data) {
                // 上传成功触发的事件
            });
            this.on("error", function (file, data) {
                // 上传失败触发的事件
            });
            this.on("removedfile", function (file) {
                // 删除文件时触发的方法
            });
        }
    });
    
    
    /**
     * 以下是自定义主题的使用
     */
    
    // 获取模板HTML并将其从文档中删除
    var previewNode = document.querySelector("#template");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);
    
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone(document.body, {
        url: "http://example.itshubao.com/index/test/upload/type/dropzone",   // 文件提交地址
        method: "post",      // 也可用put
        acceptedFiles: ".png,.gif,.jpg,.jpeg", // 允许上传的文件格式
        thumbnailWidth: 165,  // 设置缩略图的缩略比
        thumbnailHeight: 110, // 就像 thumbnailWidth一样。如果为空, 将不能重置尺寸。
        parallelUploads: 20,  // 要并行处理的文件上载数量
        maxFilesize: 2,       // 最大上传文件大小(MB)
        
        autoQueue: false,                 // 确保在手动添加之前文件不会排队
        previewTemplate: previewTemplate, // 主题模板
        previewsContainer: "#previews",   // 上传图片的预览窗口
        clickable: ".fileinput-button",   // 定义应该用作单击触发器以选择文件的元素
        
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "文件超过最大限制(2M)",
    });
    
    myDropzone.on("addedfile", function(file) {
        // 连接开始按钮
        file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
    });
    
    myDropzone.on("totaluploadprogress", function(progress) {
        // 更新总进度条
        //$("#total-progress .progress-bar").css('width', progress + "%");
    });

    myDropzone.on("sending", function(file) {
        // 上传开始时显示总进度条
        //$("#total-progress").css('opacity', 1);
        // 并禁用“开始”按钮
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
    });

    myDropzone.on("queuecomplete", function(progress) {
        // 当没有东西上传时隐藏总进度条
        //$("#total-progress").css('opacity', 0);
    });
    
    myDropzone.on("success", function(file, response) {
        // 这里假设返回格式为{"status":200,"info":"成功","picurl":".\/upload\/lyear_5ddfc00174bbb.jpg"}
        var resData = JSON.parse(response);
        if (resData.status == '200') {
            file.previewElement.querySelector('.pic_hidden_url').setAttribute('value', resData.picurl);
        } else {
            alert(resData.tips);
        }
    });
  
    myDropzone.on("error", function(file, errorMessage){
        //不接受该文件（非定义的可接受类型）或上传失败
    	alert(errorMessage);
    	myDropzone.removeFile(file);
    });

    // 设置所有传输的按钮，"add files" 按钮不需要设置，因为 `clickable` 已指定。
    $("#example-uploads .start").on('click', function() {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
    })
    $("#example-uploads .cancel").on('click', function() {
        myDropzone.removeAllFiles(true);
    });
    
    // 下面用以回显已上传的图片，编辑时可用
    // 后端存储多图片的方式，1、json保存图片信息，如下；2、有独立的附件表单独存储，相关的地方只保存id值
    // 这里以保存json为例，上传时可增加更多的隐藏域来保存上传成功后的图片信息，修改时直接返回，存id同理组装一下数据即可。
    
    var testJson = [{"size":"11626","name":"dribbble.png","picurl":"http:\/\/example.itshubao.com\/uploads\/images\/dribbble.png"},{"size":"122127","name":"Behance.png","picurl":"http:\/\/example.itshubao.com\/uploads\/images\/Behance.png"}];
    
    for(var val in testJson) {
        var mockFile = {
            size: testJson[val].size,  // 元素大小
            name: testJson[val].name, // 元素名称
            type: '.png,.gif,.jpg,.jpeg', // 元素类型
        };
        myDropzone.addFile(mockFile);                                 // 添加mock元素到显示区域
        myDropzone.options.thumbnail(mockFile, testJson[val].picurl); // 给mock元素添加数据源
        myDropzone.options.success(mockFile);                         // 给mock元素绘制上传成功标识
        mockFile.status = 'success';                                  // 设定为已成功的状态
        mockFile.previewElement.querySelector('.pic_hidden_url').setAttribute('value', testJson[val].picurl);
    }
});