Javascript 拖放操作不会将输入值设置为等于文件。如果使用“输入”按钮选择此选项，则此选项有效

我一直在尝试创建一个拖放组件。我们有一个不使用表单或提交按钮（在用户输入或拖放时完成）的工作示例

我现在正在修改该组件，以便它可以使用表单包装器并将数据发送到另一个页面

以下是js：

const $fileUploader = $('.fileUploader');
const $input = $fileUploader.find('input[type="file"]');
const $label = $fileUploader.find('label');

const showFiles = files => {
    if (files) {
        $label.text(files[0].name);
    }
};

const uploadBulkReports = () => {
  $input.on('change', e => {
    showFiles(e.target.files);

  });
  $fileUploader
    .on('drag dragstart dragend dragover dragenter dragleave drop', e => {
        e.preventDefault();
        e.stopPropagation();
  })
  .on('dragover dragenter', () => {
    $fileUploader.addClass('is-dragover');
  })
    .on('dragleave dragend drop', () => {
    $fileUploader.removeClass('is-dragover');
  })
    .on('drop', e => {
    droppedFiles = e.originalEvent.dataTransfer.files;
    $input.files = e.originalEvent.dataTransfer.files;
    showFiles(droppedFiles);
  });
};

uploadBulkReports();

我们的HTML（我从C#/Razor中简化了它）

单击以选择文件
或将其拖动到此处

Id：品牌的技术Id（留空以创建新的）
名称：品牌名称

提交

我的理解是，在拖放时，

$input.files=e.originalEvent.dataTransfer.files应将输入文件值设置为与输入选择相同的FileData信息。出于某种原因，它不适用于提交

我们只发送一个文件，所以我尝试在这里访问文件
e.originalEvent.dataTransfer.files[0]但它似乎不起作用。（
e.dataTransfer.files
对我也不起作用，我必须通过
originalEvent
方法）

虽然我认为不可能在JSFIDLE中测试表单提交，但我还是制作了这个JSFIDLE

我想知道将
$input.files
设置为删除的文件是否与通过常规方法设置文件输入相同。当我在输入更改后尝试
console.log$input.files
时，会得到
undefined
，因此我认为这是另一种方法

我希望有人能帮助你，如果你需要更多的信息请告诉我

我想知道将$input.files设置为删除的文件是否与通过常规方法设置文件输入相同

不，只有一种方法可以在文件上载控件中填充文件，那就是常规方法—单击它；它将打开操作系统文件浏览器，您可以选择文件

由于安全原因，不允许在文件上载控件上以编程方式设置文件。因此，这意味着您只能使用AJAX

.on('drop', e => {
  droppedFiles = e.originalEvent.dataTransfer.files;
  $input.files = e.originalEvent.dataTransfer.files; //<--this won't update file input's internal state
  showFiles(droppedFiles);
});

var ajaxData = new FormData($form.get(0));

$.each( droppedFiles, function(i, file) {
    ajaxData.append( 'file_'+i, file );
});

$.ajax({
    data: ajaxData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) { }
});

input[type='file']{
边框：2个虚线#aaa；
填充：100px 50px 20px 130px；
位置：相对位置；
背景颜色：黄色
}
输入[type='file']：在{
内容：“在此处拖放”；
显示：块；
位置：绝对位置；
文本对齐：居中；
最高：50%；
左：50%；
宽度：200px；
高度：100px；
余量：-25px0-100px；
字体大小：20px；
字体大小：粗体；
}
#提交{display:block；}
谢谢。这段使用伪before选择器的代码对我来说是一个启示，因为我确信：before和：after选择器不能处理输入字段。谢谢你，不过我很快就会尝试代码。
.on('drop', e => {
  droppedFiles = e.originalEvent.dataTransfer.files;
  $input.files = e.originalEvent.dataTransfer.files; //<--this won't update file input's internal state
  showFiles(droppedFiles);
});

var ajaxData = new FormData($form.get(0));

$.each( droppedFiles, function(i, file) {
    ajaxData.append( 'file_'+i, file );
});

$.ajax({
    data: ajaxData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) { }
});