javascript - 从 textField 中清除或删除文件

Question

我正在使用 PHP 的 Yii 框架，在从 textfield 清除或删除上传的文件时遇到问题。目前，它将从fileField 中删除内容，但无法删除textfield。有什么想法吗？

更新 我现在可以清除我的 textField，因为我已经通过添加 $('.getFile').val("");对我的 clearFileInputField 函数进行了硬编码。 code> 我通过在 input 部分添加 'class' => 'getName' 在我的 HTML 中引用它。虽然这会清除数据，但不会在保存后删除文件。有什么建议么？

HTML

  <div id = "clearContent">
            <?php echo $form->labelex($model,'info'); ?>
            <?php echo $form->textfield($model,'info', array(placeholder => "No file chosen", readonly => true, 'class' => 'getName')); ?><br>
            <?php echo $form->fileField($model,'info'); ?>
            <?php echo $form->error($model,'info'); ?>

            <input type="checkbox" onclick = "clearFileInputField('clearContent')" href="javascript:noAction();"> Remove File
    </div>

JavaScript:

<script>
    function clearFileInputField(tagId) {
        document.getElementById(tagId).innerHTML = document.getElementById(tagId).innerHTML;
        $('.getFile').val("");
    }
</script>

Answer 1

我不确定我是否正确理解了您遇到的问题。如果我对问题的理解完全错误，请详细说明，我会努力改进我的答案。

---

如果你想删除文本和文件输入的内容(值属性)，你可以使用如下代码:

// listen to the click on the #clearnbtn element
document.getElementById('clearbtn').addEventListener('click', function() {
    // Remove the value of the #foo and #bar elements
    document.getElementById('foo').value = "";
    document.getElementById('bar').value = "";
});

如果你想删除整个字段，你可以这样做:

// Retrieves the input element, gets its parents and removes itself from it
var fooElement = document.getElementById('foo');
fooElement.parentElement.removeChild(fooElement)

或者您可以将父元素的innerHTML属性设置为空字符串('')。

document.getElementById('clearContent').innerHTML = "";

https://jsfiddle.net/osjk7umh/1/