如何将 dropzone.js 选择的预览图像重定向到新页面？

Question

使用 dropzone 我会浏览图像文件，预览图像将显示在“dropzone-previews”类中。在按钮触发器下方，如何将“dropzone-previews”发送到另一个新页面并从那里显示图像？

HTML

<form action="/upload-file"  type="file" class="dropzone" id="upload-file-form" enctype="multipart/form-data"> 
   <div class="filepicker"></div>
   <div class="addFileButton">browse</div>
</form> 

<button type="submit" class="btn btn-success pull-right"` id="btnUpload">Upload</button>

<div class="dropzone-previews"></div>

JS

Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone('#upload-file-form', {
        paramName: "file",
        url: '/upload-file',
        method: 'post', 
        acceptedFiles: ".png,.jpg,.gif,.jpeg",
        maxFilesize: 256,
        maxFiles: 1,
        maxfilesexceeded: function(file) {
            this.removeAllFiles();
            this.addFile(file);   
        },
        parallelUploads: 1,
        uploadMultiple: false,
        autoProcessQueue: false,
        addRemoveLinks: false,
        clickable: ".addFileButton",

        previewsContainer: ".dropzone-previews",

    }); 

    $('#btnUpload').on('click', function(){
        //redirect to new page (i.e myNewPage.php) along with the image
        window.location.replace("");
    });

Answer 1

好吧，您需要将其上传到某个地方并显示链接。至少如果你只使用 jquery 和 php。

要上传它，您可以挂钩它的事件并将其发布到 php 脚本以保存或发送到 aws。

  myDropzone.on("addedfile", function(file) {
   /* Here you could use jquery ajax calls to post it */
  });

您可以阅读 event here 的 dropzone 文档，以及使用 ajax jquery here 和 here 上传文件。