时间戳

首页 > 解决方案 > DropZone JS 没有从 jQuery ID 调用的输入字段中获取外部值

javascript - DropZone JS 没有从 jQuery ID 调用的输入字段中获取外部值

问题描述

我遇到了 DropZone JS 抓取input值并将其传递给上传脚本的问题。上传工作正常，除了这个字段没有发送到POST.

我有一个非常基本的 DZ 配置：

$("#file_uploader").dropzone({
    url: '/ajax/upload.php',
    dictDefaultMessage: 'Drop photos or click here to upload',
    maxFilesize: 400000,
    params: {'project': $('#project-name').val()}, // This is the part I am having issues with
    success: function (file, response) {
        var obj = JSON.parse(response);
        if (obj.status === 'success') {
            console.log('gtg');
        } else {
            alert('upload failed');
            $(".dz-preview").remove();
        }
    }
});

我有一个字段html，看起来像：

 <input type="text" id="project-name" required="required"
       class="form-control col-md-6 col-xs-12 limited_form"
       placeholder="Project Name">

如果我只是覆盖'project': $('#project-name').val()看起来像：

'project': 'test'

有用。因此，由于某种原因，Dropzone 无法“看到”该输入字段是一个问题。

我认为这可能是 id 中的破折号project-name- 但根据 HTML5 中的规则，Ids 中允许使用破折号。

控制台中没有错误，这是：

// Testing if Selector is working
$(document).on('keyup', '#project-name', function () {
    console.log( $('#project-name').val() );
});

在我键入内容时正确显示project-name控制台中的内容，所以我知道我的选择器没问题。因此，我对为什么 DropZone 没有“看到”它感到困惑。

为什么 DropZone “忽略”由选择器 id 标识的我的 jQuery？我错过了什么明显的错误吗？

更新 值得注意的是，我的配置位于$(document).ready(function () {- 但是我在函数内部和外部都尝试过，但问题仍然存在。

标签： javascriptjqueryhtmldropzone.js

解决方案

您的 dropzone 脚本可能试图在元素加载到 DOM 之前检索该值。将脚本加载到$( document ).ready()函数中是一种方法。另一种方法是将脚本分配给一个变量，然后在 dropzone 中引用该变量，如下所示：

$("#file_uploader").dropzone({
    url: '/ajax/upload.php',
    dictDefaultMessage: 'Drop photos or click here to upload',
    maxFilesize: 400000,
    params: {'project': function() {
      var x = $('#project-name').val();
      return x;
    }},
    success: /* some function */
});

您也可以尝试直接在函数中返回输入值，看看是否可行。

$("#file_uploader").dropzone({
    url: '/ajax/upload.php',
    dictDefaultMessage: 'Drop photos or click here to upload',
    maxFilesize: 400000,
    params: {'project': function() {
      return $('#project-name').val();
    }},
    success: /* some function */
});

推荐阅读