Question

我正在使用此脚本（来自http://www.html5rocks.com/en/tutorials/file/dndfiles/）：

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
    }
}

循环浏览从桌面拖动到html元素的文件。

在该教程中，我可以阅读文件并对内容进行一些操作。

我想要更简单的东西。

我想要一个简单的表格：

<form method="post" enctype="multipart/form-data">
<input type="file" name="my_file" />
<input type="submit" />
</form>

并使用javascript设置input[name="my_file"]的值。

我可以从一些页面中读到，出于安全原因，我无法设置文件输入的值。我明白我不能设置文件输入的任意值，但我不明白为什么我不能将文件输入的值设置为拖放文件的文件名。

如果我可以从文件中读取，我认为我也可以发布文件。

有什么方法可以实现我的目标吗？

Answer 1

出于安全原因，您无法设置元素的value属性。但是，你可以像这样破解它。

使用CSS隐藏表单中的文件输入元素。在表单中有一个div元素，使其看起来像CSS的输入字段。将单击处理程序附加到此div元素，触发器将打开文件输入元素，当用户选择完文件后，您可以读取其值并使用文件输入的onChange事件更新div元素。

<form method="post" enctype="multipart/form-data">

  <input type="file" id="my_file" />

    <div id="file_selector">Select a file</div>

    <input type="submit"

</form>

#my_file { 
  visibility: hidden; 
  position: absolute; 
  left: -9999px; 
  top: -9999px 
}

#file_selector {
    display: inline-block; 
  width: 200px; 
  padding: 5px;
  background: #FFF; 
  border: solid 1px #CCC; 
  color: #666; 
}

$(function() {

    $('#file_selector').on('click', function(e) {
    $('#my_file').trigger('click');
    });

    $('#my_file').on('change', function() {
    $('#file_selector').html($(this).val());
    });

});

在此http://codepen.io/faisalchishti/pen/emmxWr

尝试此操作

使用javascript设置文件输入的值

1 个答案: