無法獲取文件類型的輸入來清除

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

我改正呢？這就是答案試試這個。 ...

公關oblem你面對的這個錯誤...

Uncaught ReferenceError: handleFiles is not defined

所以我canged像這樣......

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); 
    }); 
}); 

JSFID DLE LINK HERE

This is the Link for updated JSFIDDLE...