Question

我想知道是否可以下载使用Dropzone上传的文件。例如，向dropzone中显示的文件添加链接或要下载的按钮。

上传代码并显示已上传的文件：

的index.php

<html>
<head>  
<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.min.js"></script>
<script>

Dropzone.options.myDropzone = {

    init: function() {
        thisDropzone = this;

        $.get('upload.php', function(data) {

            $.each(data, function(key,value){

                var mockFile = { name: value.name, size: value.size };

                thisDropzone.emit("addedfile", mockFile);

                thisDropzone.emit("thumbnail", mockFile, "uploads/"+value.name);

            });

        });


        thisDropzone.on("addedfile", function(file) {

        var removeButton = Dropzone.createElement("<button>Remove</button>");


        var _this = this;

        removeButton.addEventListener("click", function(e) {
          e.preventDefault();
          e.stopPropagation();

          _this.removeFile(file);

        });


        file.previewElement.appendChild(removeButton);
      });


         thisDropzone.on("removedfile", function(file) {
      if (!file.serverId) { return; } 
      $.post("delete-file.php?id=" + file.serverId); 
    });

    }

};
</script> 

</head> 
<body>
<form action="upload.php" class="dropzone" id="my-dropzone"></form>    
</body>
</html>

upload.php的

<?php
$ds          = DIRECTORY_SEPARATOR; 

$storeFolder = 'uploads';  

if (!empty($_FILES)) {

    $tempFile = $_FILES['file']['tmp_name'];         

    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; 

    $targetFile =  $targetPath. $_FILES['file']['name']; 

    move_uploaded_file($tempFile,$targetFile);

} else {                                                           
    $result  = array();

    $files = scandir($storeFolder);                 
    if ( false!==$files ) {
        foreach ( $files as $file ) {
            if ( '.'!=$file && '..'!=$file) {       
                $obj['name'] = $file;
                $obj['size'] = filesize($storeFolder.$ds.$file);
                $result[] = $obj;
            }
        }
    }

    header('Content-type: text/json');              
    header('Content-type: application/json');
    echo json_encode($result);
}
?>

任何帮助将不胜感激

Answer 1

是的我通过更改dropzone.js文件发现它是可能的，不适合更新，但只有我发现这对我有效。

将这6行代码添加到添加的文件中：第539行附近的函数注意我已经标记了已存在的代码

// the following line already exists
if (this.options.addRemoveLinks) {

    /* NEW PART */
    file._openLink = Dropzone.createElement("<a class=\"dz-open\" href=\"javascript:undefined;\">Open File</a>");
    file._openLink.addEventListener("click", function(e) {
      e.preventDefault();
      e.stopPropagation();
      window.open("http://www.mywebsite.com/uploadsdirectory/"+file.name);
    });
    /* END OF NEW PART */

    // the following lines already exist
    file._removeLink = Dropzone.createElement("<a class=\"dz-remove\" href=\"javascript:undefined;\">" + this.options.dictRemoveFile + "</a>");
    file._removeLink.addEventListener("click", function(e) {

然后你需要用'dz-open'类来编辑CSS，以设置按钮的样式。

Answer 2

这可以使用下面的示例来完成。您仍然需要根据自己的需要进行调整。

<强> I want to display additional information after a file uploaded.

要使用从服务器发回的信息，请使用success 事件，像这样：

Dropzone.options.myDropzone = {
  init: function() {
    this.on("success", function(file, responseText) {
      // Handle the responseText here. For example, 
      // add the text to the preview element:
      file.previewTemplate.appendChild(document.createTextNode(responseText));
    });
  }
};

Answer 3

在ajax调用后在init函数中使用它。我遇到过同样的问题。解决了这个。

$('.dz-details').each(function(index, element) {
    (function(index) {
        $(element).attr('id', "filename_" + index);
        var selectFile = document.querySelector("#filename_" + index);
        selectFile.addEventListener("click", function () {
        window.open("http://localhost:8080/<<contextpath>>/pathtofile/" +  $('#filename_' + index + '> div > span').text());
    });
    }(index));
});

Answer 4

您还可以为图片添加空白链接，当您上传完成后，您可以获取image-src并将其设置为您的链接;）

<a href="#">
  <img src="" data-dz-thumbnail/>
</a>


$("img.data-dz-thumbnail").each(function() {
  $(this).closest("a").attr("href", $(this).attr("src"));
  $(this).closest("a").attr("target", "_blank");
});

Answer 5

我的代码是这样的。

                success: function(file, rawResponse){
                        file.previewElement.onclick = function() {
                            alert(1);//do download
                        }
                },

Answer 6

myDropzone.on("success", function(file) {
    var a = document.createElement('a');
    a.setAttribute('href',"/uploads/" + file.fullname);
    a.innerHTML = "<br>download";
    file.previewTemplate.appendChild(a);
});

Answer 7

是的。我找到了一种方法，方法是添加自定义预览模板（在此处添加下载按钮并设置data-file-id属性）。然后，在准备好文档上的放置区时，我搜索了最后生成的按钮元素，并修改了“ data-file-id”属性以保存文件ID。

我在dropzone的“成功”事件中做了同样的事情。

此后，我听了下载按钮的on click事件，并查找了data-file-id属性。

var oakDropzone = new Dropzone("#oakDropzone", {
    url: "/trabajo/uploadFile",
    init: function () {

        var trabajoId = $("#trabajoId").val();
        var getArchivosUrl = "/trabajo/getArchivosByTrabajo?trabajoId=" + trabajoId;

        $("#fileLoader").show();

        $.get(getArchivosUrl)
            .done(function (response) {

                for (var i = 0; i < response.data.length; i++) {

                    var file = response.data[i];
                    var fileData = { id: file.Id, name: file.Nombre, size: file.Tamaño, metadata: file.Metadata };
                    fileData.accepted = true;

                    oakDropzone.files.push(fileData);
                    oakDropzone.emit('addedfile', fileData);
                    oakDropzone.emit('thumbnail', fileData, 'data:' + response.data[i].Extension + ';base64,' + response.data[i].Preview);
                    oakDropzone.emit('complete', fileData);

                    $(oakDropzone.element[oakDropzone.element.length - 1]).attr('data-file-id', fileData.id);
                }

                $("#fileLoader").hide();

                $('#oakDropzone #template .dz-details .actionButtons .downloadFile').on('click', function (event) {

                    event.preventDefault();

                    var archivoId = $(this).data('file-id');

                    var downloadUrl = "http://localhost:11154/trabajo/downloadFile?fileId=" + archivoId;

                    window.open(downloadUrl, 'blank');
                });

            }).catch(function (response) {

                displayErrorToaster(response);
            });

        this.on("sending", function (file, xhr, formData) {

            formData.append("Id", trabajoId);
            formData.append("File", file);
        });

        this.on("success", function (file, response) {

            file.id = response.data;

            $(oakDropzone.element[oakDropzone.element.length - 1]).attr('data-file-id', file.id);

            displaySuccessToaster(response);
        });

        this.on("removedfile", function (file) {

            var deleteUrl = "/trabajo/RemoveFile?fileId=" + file.id;

            $.post(deleteUrl)
                .done(function (response) {
                    displaySuccessToaster(response);
                }).catch(function (response) {
                    displayErrorToaster(response);
                });
        });
    },
    dictRemoveFileConfirmation: 'Realmente desea quitar el archivo seleccionado?',
    dictDefaultMessage: '',
    clickable: "#btnUploadFile",
    previewTemplate: document.querySelector('#previews').innerHTML,
    addRemoveLinks: false
});

这看起来像下图：

Sample Image

希望这对您有所帮助！。

Answer 8

代码是..

$('.dz-details').each(function(index, element) {
    (function(index) {
    $(element).attr("id", "filename_" + index);
        $("#filename_" + index).on("click", function(){
            window.open("URL/path/folder/" +  $('#filename_' + index + '> div > span').text());
        });
    }(index));
});

Answer 9

我的看起来像这样，这将在“删除”之后添加“下载”锚点，它会直接下载文件。（“self”只是 dropzone 选择器）

var a = document.createElement('a');
a.setAttribute('href',existing_file.url);
a.setAttribute('rel',"nofollow");
a.setAttribute('target',"_blank");
a.setAttribute('download',existing_file.name);
                    
a.innerHTML = "<br>download";
self.find(".dz-remove").after(a);

使用DropzoneJs下载上传的文件

9 个答案: