Dropzone.js 使用 php 上传不遵循

Question

我有一个 PHP 和 SQL 代码，它使用 Dropzone.js 来尝试上传照片并添加到数据库中。我的问题是当我尝试将 dropzone 用于图片时出现错误。

这是我的 Dropzone div：

        <div class="col-md-4 bg-color-white shadow border-radius"><!-- Photos { -->
          <div class="row bg-color-dark-gold border-top-radius">
            <div class="col-md-12 color-white section-title-bar">
              <span class="ion-image"></span>&nbsp;&nbsp;&nbsp; PHOTO
            </div>
          </div>
          <div class="col-md-12 spacer"></div>

          <div class="col-md-12">
            <form action="for_lease_sale_photos_upload.php?i=<?php echo($rowProduct['productid']); ?>" class="dropzone"></form>
            <br>
          </div>

          <div class="col-md-12 spacer"></div>
        </div>

用户界面：

如果我尝试拖动照片，我的其他代码无法执行并收到此错误消息：

[Deprecation] Resource requests whose URLs contained both removed whitespace 
(`\n`, `\r`, `\t`) characters and less-than characters (`<`) are blocked. m 
Please remove newlines and encode less-than characters from places like 
element attribute values in order to load these resources. See 
https://www.chromestatus.com/feature/5735596811091968 for more details.

我很困惑为什么会收到“空白”和小于字符的错误，因为我似乎没有这些。

这是我的页面网址：

http://localhost/infinitygroup/cms/for_lease_photos_list.php?i=1

i=1 来自我的 SQL 语句

我还被告知要检查开发人员工具中的“网络”选项卡，看看是否可以在那里找到错误。任何文件中似乎都不少于或空白。

如屏幕截图所示，我的照片被屏蔽了。

将感谢任何帮助解决我的错误。谢谢

Answer 1

查看被阻止的 url，它与您所说的 url 发布到的内容不匹配。 你说它应该发布到

    for_lease_photos_list.php?i=1 

但只需查看控制台屏幕截图中的 url，您就可以看到存在其他 urlencoded 字符。 我们可以看到

    for_lease_photos_list.php?i=%3Cbr%20/%

解码为

    for_lease_photos_list.php?i=<br /%

确保

    $rowProduct['productid']

实际上包含一个有效的整数，而不是上面看到的其他字符。

Answer 2

<link href="/css/dropzone.min.css" rel="stylesheet">
<script src="/js/dropzone.js"></script>
<form class="dropzone" id="my-awesome-dropzone" enctype="multipart/form-data"></form>

在js中初始化dropzone

    <script>
    var counter=1;
    Dropzone.options.myAwesomeDropzone = {
      maxFilesize: 25,
        url: '/tset/index.php',
        init: function() {
          this.on("addedfile", function(file) { console.log('UPLOADED');});
          this.on("success", function(file,response) {
            file.additionalInfo = response;
            });
        },
        error: function(file, message) {
          $(file.previewElement).addClass("dz-error").find('.dz-error-message').text('Something went wrong!');
        },
        addRemoveLinks: true,
        removedfile: function(file) {
            var dir = "./path/images/";
            $.ajax({
                url: "/call/removefile",
                type: "post",
                data: {name: file.additionalInfo, dir: dir},
                success: function(data){
                    console.log(data);
                }
            });
            file.previewElement.remove();
            return false;
        }

   };
  </script>