Question

我有this教程中的拖放文件上传器。用户可以单击按钮来选择文件，也可以拖放。无论哪种方式，都会显示图像预览，然后在提交表单时上传图像。

以旧式方式选择文件可以正常工作 - 显示图像预览并将其上传到表单提交

但是，如果我拖放图片，则会显示预览，但是当我提交表单时，他们不会上传。

以下代码：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="ui form" action="/signup" method="post" enctype="multipart/form-data">

  <!-- text inputs -->

  <div class="field">
    <div class="box box__input">
      <input class="box__file" type="file" name="photos" id="file" data-multiple-caption="{count} files selected" multiple />
      <label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
      <button class="box__button" type="submit">Upload</button>
    </div>
    <div class="box__uploading">Uploading&hellip;</div>
    <div class="box__success">Done!</div>
    <div class="box__error">Error! <span></span>.</div>
  </div>

  <!-- text inputs -->

</form>

＆＃13;

<script type="text/javascript">
 var myVar = 'value1';
</script>

＆＃13;

Answer 1

我也遇到了这个问题。最后找到了解决方案。

这是因为删除文件时，放置事件仅显示文件信息，但未在文件输入控件中设置。因此，文件输入保持为空（或者如果先前手动选择了所选文件）。

因此，在提交表单时，它只通过手动方法提交所选文件或为空。

要在文件输入中设置所选文件，请在drop事件中设置文件输入控件的 files 属性。

$("#file").prop("files", droppedFiles);

Drag-and-drop file uploading without AJAX, synchronously in the foreground?

感谢上面的回答，我试了一下。不知何故，我认为属性文件是只读的，因此我没有尝试它。

Jquery / Ajax拖放文件上传器不提交文件

1 个答案: