Загрузить загруженный файл с 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

Да я нашел, что это возможно за счет изменения Dropzone .js, не идеально подходит для обновлений, но только так, как я нашел, что сработало для меня.

Добавьте эти 6 строк кода в addedfile: функция вокруг линии 539 примечание Ive отмечен код, который существует уже

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

Используйте это в функции init после вызова ajax. Я была такая же проблема. Решила использовать это.

$('.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

ответ

Смежные вопросы