如何在上传表单并收到服务器消息后重新发送 dropzone 文件

Question

我有一个表格，其中包含我使用 DropZone 库提交的文章信息和图像。我对这个库没有问题，它工作得很好，但是当提交的表单有错误并且我通过 Ajax 在客户端收到此错误消息时，用户修复了问题并再次发送了表单，但是不幸的是，表格没有发送，也没有留下任何文件。未选中的虽然文件在预览中可用，并且只发送到服务器一次。我应该怎么做才能解决这个问题？请输入简单代码。谢谢

成功复函数

               myDropzone.on("successmultiple", function(file,serverResponse) {

                    /* None of the uploaded files are available in Drop Zone here anymore,
                    ** and I had to delete the files so the user could choose again,
                    ** which would not be a good user experience.
                    ** Exactly what code should I write here so that there is no need to
                    ** re-select files from the user's system?
                    */
                    myDropzone.removeFile(file);

                    if(serverResponse.status)
                    {
                        // Success:: In this case, I have no problem
                        alert("Article saved successfully. Redirecting to the Articles page ...");
                        window.location.href = serverResponse.redirectedTo;
                    }
                    else
                    {
                        // Display errors received from the server to the user
                        alert("Please enter your name and resubmit the form.");
                    }
               });

Answer 1

我认为一个可能的解决方案是，如果您将事件传递给您的成功处理程序并阻止它的默认行为。像这样：

function successHandler(event){
event.preventDefault();
}

这应该防止刷新页面并丢失输入中的文件。否则我会把文件保存到一个变量中。

Answer 2

我自己找到了我的问题的答案，我也会把它放在下面。

此代码是为 Laravel blade 文件编写的：

<script>
    $("document").ready(()=>{
        var path = "{{ $path }}";
        var file = new File([path], "{{ $attach->file_name }}", {type: "{{ $attach->mime_type }}", lastModified: {{ $attach->updated_at}}})
        file['status'] = "queued";
        file['status'] = "queued";
        file['previewElement'] = "div.dz-preview.dz-image-preview";
        file['previewTemplate'] = "div.dz-preview.dz-image-preview";
        file['_removeLink'] = "a.dz-remove";
        file['webkitRelativePath'] = "";
        file['width'] = 500;
        file['height'] = 500;
        file['accepted'] = true;
        file['dataURL'] = path;
        file['upload'] = {
            bytesSent: 0 ,
            filename: "{{ $attach->file_name }}" ,
            progress: 0 ,
            total: {{ $attach->file_size }} ,
            uuid: "{{ md5($attach->id) }}" ,
        };

        myDropzone.emit("addedfile", file , path);
        myDropzone.emit("thumbnail", file , path);
        // myDropzone.emit("complete", itemInfo);
        // myDropzone.options.maxFiles = myDropzone.options.maxFiles - 1;
        myDropzone.files.push(file);
        console.log(file);
    });
</script>

如何在上传表单并收到服务器消息后重新发送 dropzone 文件

How to resend dropzone files after uploading the form and receiving server messages

javascript

forms

file-upload

dropzone.js

dropzone