javascript - 使用 javascript 设置文件输入的值

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