php Dropzone.js -显示服务器上的现有文件

gcxthw6b  于 2023-04-10  发布在  PHP
关注(0)|答案(7)|浏览(157)

我目前正在使用dropzone.js v3.10.2我有问题显示我已经上传的现有文件。我比php更胜任,但我对 AJAX 和js的知识有限
如果你能帮忙那就太好了
先谢谢你了
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.options.addedfile.call(thisDropzone, mockFile);

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

            });

        });
    }
};
</script>

</head>

<body>

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

</body>

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);                 //1
    if ( false!==$files ) {
        foreach ( $files as $file ) {
            if ( '.'!=$file && '..'!=$file) {       //2
                $obj['name'] = $file;
                $obj['size'] = filesize($storeFolder.$ds.$file);
                $result[] = $obj;
            }
        }
    }

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

PS.我知道PHP正在检索数据
先谢谢你了
大面

ldfqzlk8

ldfqzlk81#

我检查了代码(从starTutorial),它也不适合我(?)
我设法让它工作通过替换这个:

$.get('upload.php', function(data) {
  $.each(data, function(key,value) {
    var mockFile = { name: value.name, size: value.size };
    thisDropzone.options.addedfile.call(thisDropzone, mockFile);
    thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name);
  });
});

用这个:

$.getJSON('files/list-all', function(data) {
  $.each(data, function(index, val) {
    var mockFile = { name: val.name, size: val.size };
    thisDropzone.options.addedfile.call(thisDropzone, mockFile);
    thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/" + val.name);
  });
});

这个答案归功于:https://stackoverflow.com/a/5531883/984975
编辑:在4.0版本中,现有文件的缩略图将显示提示栏。要解决这个问题,请添加:

thisDropzone.emit("complete", mockFile);
tzxcd3kk

tzxcd3kk2#

Dropzone 5.x

到目前为止给出的解决方案不适用于dropzone版本5.x。对我来说有效的是修改dropzone的配置选项如下:

init: function () {
                var mockFile = {
                    name: 'FileName',
                    size: '1000', 
                    type: 'image/jpeg',
                    accepted: true            // required if using 'MaxFiles' option
                };
                this.files.push(mockFile);    // add to files array
                this.emit("addedfile", mockFile);
                this.emit("thumbnail", mockFile, 'http://url/to/file');
                this.emit("complete", mockFile); 
            }

概念是,创建一个mock文件,调用事件处理函数**addedfilethumbnail绘制预览。最后调用complete**事件,确保没有进度条等显示。
Reference

yyhrrdl8

yyhrrdl83#

我离开这里的解决方案,为我工作。(Dropzone v5.7.0和Codeigniter v3.1.11)
1.使用Dropzone选项初始化
1.对后端脚本进行 AJAX 调用,该脚本返回包含图像信息的json编码对象数组(问题中的PHP方式,这里的Codeigniter方式)
1.使用jQuery each函数迭代包含图像信息的每个对象
1.在这里使用代码片段:https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server来显示每个图像
在我的App控制器中:

public function ilan_fotolari($ilan_id = 0)
{
    $this->load->helper('ilan');
    $dirPath = './assets/uploads/'.ilan_dir($ilan_id);
    $this->load->helper('file');
    $file_names = get_filenames($dirPath);
    $mocks = [];
    foreach ($file_names as $file_name) {
        $mock['name'] = $file_name;
        $dirUrl = base_url('assets/uploads/'.ilan_dir($ilan_id));
        $mock['url'] = $dirUrl.$file_name;
        $mocks[] = $mock;
    }
    $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($mocks));
}

在我script.js中:

Dropzone.options.ilanFotoAlani = {
    paramName: "foto", // The name that will be used to transfer the file
    maxFilesize: 5, // MB
    maxFiles: 9,
    resizeWidth: 1000,
    resizeHeight: 644,
    resizeMimeType: 'image/jpeg',
    addRemoveLinks: true,
    dictDefaultMessage: 'Fotoğraf sürükle veya seç',
    dictFileTooBig: 'Fotoğraf boyutu en fazla 5MB olmalı',
    dictRemoveFile: 'Fotoğrafı sil',
    dictCancelUpload: 'İptal et',
    dictMaxFilesExceeded: 'En fazla 9 fotoğraf yükleyebilirsin',
    init: function () {
        let myDropzone = this;
        $.ajax({
            type: 'get',
            url: '/ilan-fotolari',
            success: function(mocks){
                $.each(mocks, function(key,value) {
                    let mockFile = { name: value.name, size: 1024 };
                    myDropzone.displayExistingFile(mockFile, value.url);
                });
            },
            error: function(xhr, durum, hata) {
                alert("Hata: " + hata);
            }
        });
    }
};

我把不同的解决方案混合在一起。

0lvr5msh

0lvr5msh4#

这是我实现的方式,我使用了createThumbnailFromUrl,而不是使用发出一个thumbnail事件。
HTML元素;

<form id="sample-img" action="/upload" class="dropzone">
    <div class="dz-default dz-message"></div>
</form>

JS代码;

previewThumbailFromUrl({
    selector: 'sample-img',
    fileName: 'sampleImg',
    imageURL: '/images/sample.png'
});

function previewThumbailFromUrl(opts) {
    var imgDropzone = Dropzone.forElement("#" + opts.selector);
    var mockFile = {
        name: opts.fileName,
        size: 12345,
        accepted: true,
        kind: 'image'
    };
    imgDropzone.emit("addedfile", mockFile);
    imgDropzone.files.push(mockFile);
    imgDropzone.createThumbnailFromUrl(mockFile, opts.imageURL, function() {
        imgDropzone.emit("complete", mockFile);
    });
}
xienkqul

xienkqul5#

新更新

这是一个老问题,但在Dropzone的最新版本中,更准确地说,从版本5.7.0开始,可以通过名为displayExistingFile的专用方法轻松显示现有文件。

示例

let myDropzone = new Dropzone("div#myId", { 
    url: "/file/post"
});

const files = [
    {name: 'square-600', size: 1000, url: 'https://via.placeholder.com/600'},
    {name: 'square-800', size: 1200, url: 'https://via.placeholder.com/800'}
];

files.forEach(function (file) {

    let mockFile = {
        name: file.name,
        size: file.size,
    };

    myDropzone.displayExistingFile(mockFile, file.url);
});

displayExistingFile类型定义

displayExistingFile(
    mockFile: Dropzone.DropzoneMockFile,
    imageUrl: string,
    callback?: () => void,
    crossOrigin?: 'anonymous' | 'use-credentials',
    resizeThumbnail?: boolean,
): any;
8ftvxx2r

8ftvxx2r6#

我遇到了maxFiles/maxfilesexceeded的问题,在寻找一个anser时花了一些时间,然后我发现下面的链接:
https://www.bountysource.com/issues/1444854-use-files-already-stored-on-server-wiki-example-incomplete?utm_campaign=plugin&utm_content=tracker%2F283989&utm_medium=issues&utm_source=github

$.each(obj, function(i, item) {

  ///faking the BytesSent its not essanail to me.. if you need it just pass the correct one
  var upload = {bytesSent: 12345};

  /// again fake the size..
  var mockFile = {name: item.name, size: 12345, accepted: true};

  mockFile.upload = upload;
  mockFile.kind = "file";
  Dropzone.forElement("#editfileuploader").emit("addedfile", mockFile);

  //push the file to files array because getAcceptedFiles using this array length to get the currct files count..
  Dropzone.forElement("#editfileuploader").files.push(mockFile);

  //this for lettig dropzone to creat the thumbnail(item.ts has the file location)
  Dropzone.forElement("#editfileuploader").emit("thumbnail", mockFile, item.ts);

  //to show the success mark and to return image id response
  Dropzone.forElement("#editfileuploader").emit("success", mockFile, item.id);
});
1dkrff03

1dkrff037#

我只是离开了对我有效的解决方案。
此设置将已上传的文件计数到maxFiles限制,并且还使用简单的约定。

  • Laravel 9.19
  • Dropzone 6.0.0 Beta

假设您已将文件存储在storage\app\public文件夹中,并使用
php artisan storage:link
命令,按照下面的代码片段设置GET路由以从服务器端返回文件

use Illuminate\Support\Facades\File;

$uploaded_path  = 'storage\\uploads\\'.$user['id'].'\\images';
$images_info = []; 

$images = File::allFiles(public_path($uploaded_path));

// Read images
foreach ($images as $image) { 

    $filename = $image->getFilename(); 
    $size = $image->getSize();
            
    $images_info[] = array( 
        "name" => $filename, 
        "size" => $size, 
        "path" => url($uploaded_path.'\\'.$filename) 
    ); 
} 

return response()->json($images_info, 200);

然后在前端,在dropzone init()函数中,

init: function() {
    var thisDropzone = this
    $.get('insert_the_route_to_above_function_on_serverside', function(data) {
        $.each(data, function(key, value){           
            var mockFile = { 
                name: value.name, 
                size: value.size,
                accepted: true
            }
            thisDropzone.files.push(mockFile);
            thisDropzone.displayExistingFile(mockFile, value.path)               
        });
    })
}

相关问题