在dropzone js中显示服务器上传的文件

时间:2013-10-11 06:15:34

标签: dropzone.js

我使用 dropzone js 插件将文件上传到php服务器。它工作得很好。我正在方便用户更新上传的文件。因此,一旦用户点击更新按钮,就会出现dropzone,我可以通过 JQuery-AJAX 调用在其中显示上传的文件。但我的问题是,尽管文件以缩略图格式显示,但dropzone中的文件数量计为零。我觉得没有触发accept函数。但是如果将新文件添加到显示列表中,虽然文件已经存在,但文件计数为1。

我使用以下代码在dropzone中显示文件:

var mockFile = { name: "Filename", size: 12345 };
myDropzone.options.addedfile.call(myDropzone, mockFile); 
myDropzone.options.thumbnail.call(myDropzone, mockFile, "/image/url");

任何人都可以帮我解决这个问题吗?

3 个答案:

答案 0 :(得分:3)

我认为您需要像这样手动推送dropZone中的mockFile

myDropzone.emit("addedfile", mockFile);
myDropzone.emit("complete", mockFile);
myDropzone.files.push(mockFile);

它为我工作......如果您需要更多代码,请询问!

答案 1 :(得分:0)

不按照此处https://github.com/enyo/dropzone/issues/418

的说明上传模拟文件

如果您想在myDropzone.uploadFiles([]);

中使用init()提交表单
$('input[type="submit"]').on("click", function (e) {

                e.preventDefault();
                e.stopPropagation();

                var form = $(this).closest('#dropzone-form');
                if (form.valid() == true) { //trigger ASP.NET MVC validation
                    if (myDropzone.getQueuedFiles().length > 0) {
                        myDropzone.processQueue();  
                    } else {                       
                        myDropzone.uploadFiles([]);
                    }                                    
                }               
            });

答案 2 :(得分:0)

U!

的例子
jQuery(function($) {
    //文件上传
    $(".dropzone").dropzone({
        url : "pic_upload.jsp?id=<%=request.getParameter("id")%>",
        addRemoveLinks : true,
        dictRemoveLinks : "x",
        dictCancelUpload : "x",
        maxFiles : 5,
        maxFilesize : 5,
        acceptedFiles: "image/*",

        init : function() {     
            //上传成功处理函数
            this.on("success", function(file) {
                alert("修改前:"+file.name);

            });

            this.on("removedfile", function(file) {
                alert("File " + file.name + "removed");
                //ajax删除数据库的文件信息
                $.ajax({    
                    type:'post',        
                    url:'pic_delete.jsp?id='+file.name ,   
                    cache:false,      
                    success:function(data){

                    }    
                });
            });


            <%
            if(null!=list){
                for(PlaceImg img:list){%>
                //add already store files on server
                var mockFile = { name: "<%=img.getId()%>", size: <%=img.getFilesize()%> };

                // Call the default addedfile event handler
                this.emit("addedfile", mockFile);

                // And optionally show the thumbnail of the file:
                this.emit("thumbnail", mockFile, "<%=img.getImgUrl()%>");
                <%}
                }%>

        }
    });