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

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(){&nbsp; document.getElementById("filename").value = document.getElementById('file').value;}</script>请注意，这html会将文件的完整路径放入type='text'输入中。保存新文件时，需要对编辑过的文件名进行一些解析。