使用文本输入字段上传文件，以便用户也可以输入文件路径

Question

我目前有一个表单，其中上传文件如下所示：我想让它看起来像这样：这样做的原因是因为服务器已经有了这些文件。所以我只想在输入字段中添加 URL。但是，上传按钮也很重要，因为我们需要上传尚未在服务器中的文件。我们如何最好地解决这个问题？我目前有这个代码：function wp_custom_attachment() {    wp_nonce_field(plugin_basename(__FILE__), 'wp_custom_attachment_nonce');    $html .= '<input type="file" id="wp_custom_attachment" name="wp_custom_attachment" value="" size="25" />';    echo $html;}我尝试了这样的方法，但最终出现了警告：$html .= '<input type="text" value="" id="wp_custom_attachment" name="wp_custom_attachment" onclick="javascript:document.getElementById(\'file\').click();"><input id="file" type="file" name="img" onchange="ChangeText(this, \'wp_custom_attachment\');"/>';警告：Warning: Illegal string offset 'url' in /path/content.php on line 42

Answer 1

您可以通过使用一个隐藏的输入做到这一点type='file'，用起来button和输入type='text'。为了使按钮处于活动状态，我们在按钮的 处添加了一个触发器onclick。onchange输入type='file'我们触发一个函数changeInput来改变输入的内容type='text'。

结果如下html：

<input type="text" id="filename" name="filename"><button onclick="document.getElementById('file').click();">Open</button>

<input id="file" type="file" name="file" style="display: none;" onchange="changeInput()" />

<script>

function changeInput(){

  document.getElementById("filename").value = document.getElementById('file').value;

}

</script>

请注意，这html会将文件的完整路径放入type='text'输入中。保存新文件时，需要对编辑过的文件名进行一些解析。