使用DropzoneJs下载上传的文件

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

上传和显示已经上传的文件中的代码：

的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); 
} 
?>

任何帮助将非常感激

来源

2014-01-10 Vitor

是的，我发现有可能通过改变悬浮窗.js文件，不是更新的理想选择，但只有我发现它适用于我。

这6行的代码添加到addedfile：围绕线功能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) {

然后，你需要编辑一类的CSS“DZ-开放”的代码，设置按钮的样式。

来源

2014-01-17 13:53:42 user3206704

这可以使用下面的示例来完成。你仍然需要根据你的需求调整它。

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)); 
    }); 
    } 
};

来源

2014-01-10 19:07:36 JSuar

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)); 
});

来源

2014-04-13 06:06:25

，你还可以添加一个空链接到你的图片，当你上传完成之后，您可以获取图像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"); 
});

来源

2014-10-18 22:41:15

我的代码是一样的东西这个。

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

来源

2016-07-11 15:23:11 Djomla

使用DropzoneJs下载上传的文件

回答

相关问题