Question

我正在编写一个网站，我需要从用户那里获得PDF，JPG或PNG。当用户选择文件时，我想要显示文件的名称。此外，我想立即检查文件是PDF，JPG还是PNG，这样如果文件不是这样的文件就无法上传。

我的代码：

<style>
#file { display:none; }
</style>

<label for="file">  
    <div id="file-wrapper">  
        <input id="file" type="file" name="file" required/>
        <div class="button smallbtn">Choose file</div>
        <div id="filev">No file chosen</div>
    </div>
    </label>

    <script>   
       setInterval(function(){
            document.getElementById("filev").innerHTML = document.getElementById("file").value;
        }, 2000);
    </script>

Answer 1

希望它有所帮助！

var _validFileExtensions = [".jpg", ".jpeg", ".pdf", ".png"];

function ValidateInput(oInput) {
  if (oInput.type == "file") {
    var sFileName = oInput.value;
    if (sFileName.length > 0) {
      var blnValid = false;
      for (var j = 0; j < _validFileExtensions.length; j++) {
        var sCurExtension = _validFileExtensions[j];
        if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
          blnValid = true;
          break;
        }
      }

      if (!blnValid) {
        alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
        oInput.value = "";
        return false;
      }
    }
  }
  return true;
}

<style>
  #file {
    display: none;
  }
</style>

<label for="file">  
    <div id="file-wrapper">  
        <input id="file" type="file" name="file" onChange="ValidateInput(this);" />
        <div class="button smallbtn">Choose file</div>
        <div id="filev">No file chosen</div>
    </div>
    </label>

使用javascript即时获取输入[type =“file”]值？

1 个答案: