Question

所以我看了其他问题，而且我在页面上走得太远而无法尝试其他问题。我有一个输入类型的文件，我试图清除它，当用户决定他们不想使用它。我有一些其他功能设置为显示文件名，大小等...基于FILE API但由于某种原因我无法获得清除输入。我正在尝试几种不同的方法来清除它但仍然没有。任何人都能看到我做错了什么。我有一个jQuery检查来检查输入的值，它永远不会清除。我唯一能想到的是我使用标准隐藏输入并使用链接，所以我可以实际设置文件输入按钮的样式。

这是FIDDLE： JS FIDDLE

这是HTML：

<div>
<label id="huf1-label">fileGroup 1</label>
<input type="file" id="fileElem" accept="image/*" style="display:none"
       onchange="handleFiles(this.files)" name="file">
<a href="#" id="fileSelect" class="c1-button right gray" tabindex="0">Select
    File to
    Upload<span class="icon-checkmark"></span> </a>
</div>
<div>
<label id="huf1Btn-label">
    <div class="fileInfoContainer">
        <ul>
            <li>
                <div id="fileList" class="fileInfoContainer">
                </div>
            </li>
        </ul>
    </div>
</label>
<button id="removeFile1" class="c1-button red left-icon"
        aria-controls="huf1">
    <span class="icon-remove"></span><b> Cancel</b>
    <span class="hidden">fileGroup 1</span>
</button>
<div class="filename"></div>

这是脚本：

window.URL = window.URL || window.webkitURL;
//BEGIN - fileSelect1 and handleFile
var fileSelect = document.getElementById("fileSelect"),
        fileElem = document.getElementById("fileElem"),
        fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function (e) {
    if (fileElem) {
        fileElem.click();
    }
    e.preventDefault(); // prevent navigation to "#"
}, false);
function handleFiles(files) {
    if (!files.length) {
        fileList.innerHTML = "<p></p>";
    } else {
        $('#fileList').empty().append();
        var list = document.createElement("ul");
        for (var i = 0; i < files.length; i++) {
            var li = document.createElement("li");
            list.appendChild(li);
            var info = document.createElement("span");
            info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
            li.appendChild(info);
        }
        fileList.appendChild(list);
        $("#removeFile1").click(function (event) {
            event.preventDefault();
            $("#fileList").empty();
            $("#removeFile1").find('b').html('Cancel');
            $('#fileElem').each(function() {
                $(this).val();
            });
            document.getElementById("fileElem").value = "";
            document.getElementById("fileSelect").value = "";

            console.log('#fileList' + 'was deleted');
            console.log('#fileElem' + 'was deleted I hope');
            //  console.log($(this)+'#fileList'.val());
        });

    }
};
 $("#fileElem").change(function(){
    if (this.val == "" ) {
        $("#removeFile1").find('b').html('Cancel');
    }  else {
        $("#removeFile1").find('b').html('Remove this file');
        }
});


 $(function() {
 $("input:file").change(function (){
     var fileName = $(this).val();
     $(".filename").html(fileName);
 });
 });

Answer 1

我纠正了这就是答案试试这个......

您遇到的问题是此错误......

未捕获的ReferenceError：未定义handleFiles

所以我喜欢这样......

<强> HTML

<div>
<label id="huf1-label">fileGroup 1</label>
<input type="file" id="fileElem" accept="image/*" style="display:none"
        name="file">
<a href="#" id="fileSelect" class="c1-button right gray" tabindex="0">Select
    File to
    Upload<span class="icon-checkmark"></span> </a>
</div>
<div>
    <label id="huf1Btn-label">
        <div class="fileInfoContainer">
            <ul>
                <li>
                    <div id="fileList" class="fileInfoContainer">
                    </div>
                </li>
            </ul>
        </div>
    </label>
    <button id="removeFile1" class="c1-button red left-icon" 
            aria-controls="huf1">
        <span class="icon-remove"></span><b> Cancel</b>
        <span class="hidden">fileGroup 1</span>
    </button>
    <div class="filename"></div>
</div>

<强> SCRIPT

    window.URL = window.URL || window.webkitURL;
    //BEGIN - fileSelect1 and handleFile
    var fileSelect = document.getElementById("fileSelect"),
            fileElem = document.getElementById("fileElem"),
            fileList = document.getElementById("fileList");

    fileSelect.addEventListener("click", function (e) {
        if (fileElem) {
            fileElem.click();
        }
        e.preventDefault(); // prevent navigation to "#"
    }, false);
    $("#fileElem").change(function() {
        var files=this.files;
        if (!files.length) {
            fileList.innerHTML = "<p></p>";
        } else {
            $('#fileList').empty().append();
            var list = document.createElement("ul");
            for (var i = 0; i < files.length; i++) {
                var li = document.createElement("li");
                list.appendChild(li);
                var info = document.createElement("span");
                info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
                li.appendChild(info);
            }
            fileList.appendChild(list);
            $("#removeFile1").click(function (event) {
                event.preventDefault();
                $("#fileList").empty();
                $("#removeFile1").find('b').html('Cancel');
                $('#fileElem').each(function() {
                    $(this).val();
                });
                document.getElementById("fileElem").value = "";
                document.getElementById("fileSelect").value = "";

                console.log('#fileList' + 'was deleted');
                console.log('#fileElem' + 'was deleted I hope');
                //  console.log($(this)+'#fileList'.val());
            });

        }
    });
 $("#fileElem").change(function(){
        if (this.val == "" ) {
            $("#removeFile1").find('b').html('Cancel');
        }  else {
            $("#removeFile1").find('b').html('Remove this file');
            }
    });


 $(function() {
     $("input:file").change(function (){
         var fileName = $(this).val();
         $(".filename").html(fileName);
     });
 });

JSFIDDLE LINK HERE

This is the Link for updated JSFIDDLE...

无法获取要清除的文件类型输入

1 个答案: