使用 javascript 设置文件输入的值

Set value of file input with javascript

本文关键字：输入 文件 javascript 设置 使用      更新时间：2023-09-26

我正在使用这个脚本（从 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"]的值。

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

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

有什么方法可以完成我想要的吗？

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

使用 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

相关文章：