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

【问题标题】：How to resend dropzone files after uploading the form and receiving server messages上传表单并接收服务器消息后如何重新发送 dropzone 文件
【发布时间】：2021-07-18 13:51:30
【问题描述】：

我有一个表单，其中包含我使用 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.");
                    }
               });

【问题讨论】：

标签： javascript forms file-upload dropzone.js dropzone

【解决方案1】：

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

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

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

【讨论】：

谢谢，@Dyvd ...它可以准确地告诉我应该写什么以及应该在哪里写
您认为重新加载文件会更好吗？因为drop zone会返回Harrow文件作为响应。我就是不知道怎么上传文件
“harrow”文件是什么意思？如果你想在 NodeJs 中上传文件，请查看this 文章。

【解决方案2】：

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

这段代码是为 Laravel 刀片文件编写的：

<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>

【讨论】：