当前位置: 首页 > 面试题库 >

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

萧明贤
2023-03-14
问题内容

我目前正在使用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正在检索数据

提前致谢

达米安


问题答案:

我检查了代码(来自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);
  });
});

编辑:在4.0版中,现有文件的缩略图将与提示栏一起显示。要解决此问题,请添加:

thisDropzone.emit("complete", mockFile);


 类似资料:
  • 我按照这个指令创建了一个grpc服务器和客户端:https://docs . Microsoft . com/en-us/aspnet/core/tutorials/grpc/grpc-start?view=aspnetcore-3.0 当我尝试从客户端调用服务时,客户端会显示以下错误消息:“发生了一个或多个错误。(状态(StatusCode=Unknown,Detail=No Status re

  • 本文向大家介绍J2EE Servlet上传文件到服务器并相应显示功能的实现代码,包括了J2EE Servlet上传文件到服务器并相应显示功能的实现代码的使用技巧和注意事项,需要的朋友参考一下 编辑上传文件的页面upload.html 注意事项:上传方式使用POST不能使用GET(GET不能上传文件) 表单 enctype 属性应该设置为 multipart/form-data.(表示提交的数据是二

  • 本文向大家介绍基于django和dropzone.js实现上传文件,包括了基于django和dropzone.js实现上传文件的使用技巧和注意事项,需要的朋友参考一下 1、dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2、dropzone.js前端界面上传方式 官网下载 并且

  • 问题内容: 我正在用Python编写cgi页面。假设某个客户向我的cgi页面发送了请求。我的cgi页会进行计算,并在获得第一个输出后立即将其发送回客户端,但是它将 继续 进行计算并在发送第一个响应 后 发送其他响应。 我在这里介绍的内容可能吗?我之所以问这个问题,是因为据我所知,在cgi页面中,响应是一次性发送回去的,一旦发送响应,cgi- page就会停止运行。这个东西是在服务器端或客户端制作的

  • 问题内容: 我一直在寻找解决方案,但是已经找不到了。 基本上,我想从Android设备上将文件上传到http网站。但是,我不知道如何执行此操作。我在设备上使用Java,并且我想在服务器端使用PHP。我只想上传文件,而不想在服务器上做任何花哨的事情。 谁能提供代码和/或指向我所需的链接?我对此几乎没有经验,也很茫然。 谢谢,NS PS。我没有PHP编码经验。 问题答案: 是的,所以我找到了Java方