Question

我已经创建了一个用户可以上传文件的表单，我想添加一个拖放功能，所以我就这样做了：

utf16_double_dec_code_to_utf8 <- function(utf16_decimal_code){
  string_elements <- str_match_all(utf16_decimal_code, "&#(.*?);")[[1]][,2]

  string3a <- string_elements[1]
  string3b <- string_elements[2]

  string4a <- sprintf("0x0%x", as.numeric(string3a))
  string4b <- sprintf("0x0%x", as.numeric(string3b))

  string5a <- paste0(
    # "0x", 
    as.hexmode(string4a) - 0xd800
  )
  string5b <- paste0(
    # "0x",
    as.hexmode(string4b) - 0xdc00
  )

  string6 <- paste0(
    stringi::stri_pad(
      paste0(BMS::hex2bin(string5a), collapse = ""),
      10,
      pad = "0"
    ) %>%
      stringr::str_trunc(10, side = "left", ellipsis = ""),
    stringi::stri_pad(
      paste0(BMS::hex2bin(string5b), collapse = ""),
      10,
      pad = "0"
    ) %>%
      stringr::str_trunc(10, side = "left", ellipsis = "")
  )

  string7 <- BMS::bin2hex(as.numeric(strsplit(string6, split = "")[[1]]))

  string8 <- as.hexmode(string7) + 0x10000

  unicode_pattern <- string8
  unicode_pattern
}

make_unicode_entity <- function(x) {
  paste0("\\U000", utf16_double_dec_code_to_utf8(x))
}
make_html_entity <- function(x) {
  paste0("&#x", utf16_double_dec_code_to_utf8(x), ";")
}

# An example string, using the "hug" emoji:
example_string <- "test &#55358;&#56599; test"

output_string <- stringr::str_replace_all(
  example_string,
  "(&#[0-9]*?;){2}",  # Find all two-character "&#...;&#...;" codes.
  make_unicode_entity
  # make_html_entity
)

cat(output_string)

# To print Unicode string (doesn't display in R console, but can be copied and
# pasted elsewhere:
# (This assumes you've used 'make_unicode_entity' above in the str_replace_all
# call):
stringi::stri_unescape_unicode(output_string)

此代码的预期行为是，当用户在保留1个或多个文件时将鼠标悬停在其上时，框会更改颜色（由css控制）（我想将其限制为仅接受1个文件）。但这不起作用。

每当文件被放在盒子上时，输入的值应该成为用户丢弃的文件，但这种情况也不会发生。

相反，每当我将文件放在那里时，我都会在控制台中收到此错误：

<small id="filename"></small>
<!-- <input id="thumbnail" type="file" name="thumbnail"  class="input input-thumbnail form-control"> -->
<div class="dropzone" id="droparea">
    <div class="input-container">
        <input type="file" class="dropzone-input" id="thumbnail-input" name="thumbnail">
    </div>
    <div class="overlay">
        <small class="overlay-text" id="overlay-text">Drag and Drop</small>
    </div>
</div>

<script>
    (function() {
    let dropzone = document.getElementById('droparea');
    let dropzonetext = document.getElementById('overlay-text');
    let filenametext = document.getElementById('filename');
    let fileImput = document.getElementById('thumbnail-input');

    dropzone.ondrop = function(e) {
        e.preventDefault();
        this.className = 'dropzone';
        dropzonetext.className = 'overlay';
        fileImput.files[0] = e.target.files[0];
        filenametext = fileImput.files[0].name
    };

    dropzone.ondragover = function() {
        this.className = 'dropzone dragover';
        dropzonetext.className = 'overlay dragover';
        return false;
    };

    dropzone.ondragleave = function() {
        this.className = 'dropzone';
        dropzonetext.className = 'overlay';
        return false;
    };
}());
</script>

第79行为：Uncaught TypeError: Cannot read property '0' of undefined at HTMLDivElement.dropzone.ondrop ((index):79) dropzone.ondrop @ (index):79

是什么导致了这个问题？

这里也是拖放的CSS：

fileImput.files[0] = e.target.files[0];

**编辑：**

有人要求截图：

您可以看到所选文件是我在输入中删除的文件

Answer 1

结果是，e.target.files为null。因为你在dropzone上设置了事件ondrop，所以e.target可能是你放弃的dropzone中的任何元素（在我本地的图片测试中详细说明）。但是有些元素没有文件属性。具有files属性的ele是输入。所以你应该尝试1个选项：

选项1，仅为输入

设置ondrop事件

选项2，检查e.target。如果（输入e.target）使用

fileImput.files[0] = e.target.files[0];

否则使用

fileImput.files[0] = e.target.parentElement.querySelector('#thumbnail-input').files[0];

拖放输入以处理不处理文件的文件

1 个答案: