Dropzone.js - عرض الملفات الموجودة على الخادم

StackOverflow https://stackoverflow.com//questions/24009298

  •  21-12-2019
  •  | 
  •  

سؤال

أستخدم حاليًا الإصدار 3.10.2 من dropzone.js وأواجه مشكلات في عرض ملفاتي الحالية التي قمت بتحميلها بالفعل.أنا أكثر كفاءة في لغة 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>

تحميل.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);
}
?>

ملاحظة.أعلم أن PHP يقوم باسترداد البيانات

شكرا لك مقدما

داميان

هل كانت مفيدة؟

المحلول

راجعت الرمز (من pattutorial) ولم يعمل بالنسبة لي إما (؟)

تمكنت من الحصول عليها عن طريق استبدال هذا:

giveacodicetagpre.

مع هذا:

giveacodicetagpre.

ائتمان لهذا الجواب: https://stackoverflow.com/a/5531883/984975

تحرير: في الإصدار 4.0، سيتم عرض الصور المصغرة للملفات الموجودة مع شريط جديلة فيه.لحل هذا الإضافة:

giveacodicetagpre.

نصائح أخرى

لـ Dropzone 5.x

الحلول المقدمة حتى الآن لم تنجح إصدار منطقة الإسقاط 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); 
            }

المفهوم هو إنشاء ملف وهمي واستدعاء معالجات الأحداث addedfile و thumbnail لرسم المعاينة.ثم اتصل أخيرًا complete حدث للتأكد من عدم وجود أشرطة التقدم، وما إلى ذلك.يتم عرضها.

مرجع

This is the way which I implemented it. I have used createThumbnailFromUrl rather using emitting a thumbnail event.

HTML element;

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

JS code;

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

I was having trouble with maxFiles/maxfilesexceeded and take some while looking for a anwser and then I found this links below:

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);
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top