从Javascript重置文件上传控件

Question

我有一个ASP网站页面，其中添加了上传控件

<asp:FileUpload ID="FileUpload1" runat="server" 
                        BorderStyle="None" Width="215px" onchange="return checkfile();" style="margin-left: 14px" BackColor="#F0F0F0" />

我正在使用 javascript 验证即将上传的文件。如果文件类型是 .exe，则不允许上传并显示一条消息。否则，我会在标签 "lblFileName" 中显示文件名。但问题在于，如果出现错误（例如文件是exe），那么我想要重置上传控件（FileUpload1）。现在它只会显示消息，但仍然允许提交包括 .exe 文件在内的表单。所以我该怎么重置它呢？

 function checkfile() {

     var filename = document.getElementById("FileUpload1").value;
     var lastIndex = filename.lastIndexOf("\\");


     if (lastIndex >= 0) {
         filename = filename.substring(lastIndex + 1);
     }

    var FileExt = filename.split('.').pop();

    if (FileExt == "exe") {  

        document.getElementById('<%=lblFileName.ClientID%>').innerHTML = "you cannot attach exe file";
    return false;

     }
    else {
        document.getElementById('<%=lblFileName.ClientID%>').innerHTML = filename;
    }
  }

- IT researcher

---

这个链接有一些不错的技巧：https://css-tricks.com/snippets/jquery/clear-a-file-input/。 - Ja8zyjits

Answer 1

你的代码有问题，onchange="return checkfile();"。

你的函数应该是这样的：

    function checkfile() {

         var filename = document.getElementById("FileUpload1").value;
         var lastIndex = filename.lastIndexOf("\\");


         if (lastIndex >= 0) {
             filename = filename.substring(lastIndex + 1);
         }

        var FileExt = filename.split('.').pop();

        if (FileExt == "exe") {         
            document.getElementById('lblFileName').innerHTML = "you cannot attach exe file";
            document.getElementById("FileUpload1").value='';
            return false;

         }
         else {
            document.getElementById('lblFileName').innerHTML = filename;
        }
      }

返回值将禁止文件放入您的文件上传控件，因此这将解决您的问题。

请在此处检查演示demo

- Just code

---

我尝试了你提到的相同脚本，但它没有起作用。请查看问题中附加的截图。 - IT researcher

你好，请添加这行代码 document.getElementById("FileUpload1").value=''; 在我的函数上面检查的函数中，你忘记添加了这一行。 - Just code

Answer 2

我正在使用jQuery这种方式来做：

    $(function () {        
    $('<%= fileUploadCV.ClientID %>').change(function () {

        //because this is single file upload I use only first index
        var f = this.files[0]

        //here I check if the file size is bigger than 8 MB (numbers below are in bytes)
        if (f.size > 8388608 || f.fileSize > 8388608)
        {
           //show an alert to the user
           alert("Allowed file size exceeded. (Max. 8 MB)")

           //and RESET file upload control
           this.value = null;
        }
    })
});

- Besnik Kastrati