javascript – 使用DropzoneJs下载上传的文件

我想知道是否可以下载使用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);
}
?>

任何帮助都感激不尽

解决方法

是的我通过改变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,以设置按钮的样式.

javascript – 使用DropzoneJs下载上传的文件

解决方法

相关文章