html - How stop file upload event using JavaScript - Stack Overflow

admin管理员组

文章数量:1403226

I want to stop file upload event when I upload the file more than 5mb or if my file extension is not .jpg or .png. I found a code but when I try to upload the invalid file type then it only gives me alerts that I have uploaded the wrong file but it does not cancel the event. Here is the code:

<script>
function checkFile(fieldObj)
{
    var FileName  = fieldObj.value;
    var FileExt = FileName.substr(FileName.lastIndexOf('.')+1);
    var FileSize = fieldObj.files[0].size;
    var FileSizeMB = (FileSize/5485760).toFixed(2);

    if ( (FileExt != "png" && FileExt != "jpg") || FileSize>5485760)
    {
        var error = "File type : "+ FileExt+"\n\n";
        error += "Size: " + FileSizeMB + " MB \n\n";
        error += "Please make sure your file is in png or jpg format and less than 5 MB.\n\n";
        
        alert(error);
        return false;
    }
    return true;
}
</script>

and here is html code:

 <input type="file"onchange="checkFile(this)"name='sec_2_img'>

I want to stop file upload event when I upload the file more than 5mb or if my file extension is not .jpg or .png. I found a code but when I try to upload the invalid file type then it only gives me alerts that I have uploaded the wrong file but it does not cancel the event. Here is the code:

<script>
function checkFile(fieldObj)
{
    var FileName  = fieldObj.value;
    var FileExt = FileName.substr(FileName.lastIndexOf('.')+1);
    var FileSize = fieldObj.files[0].size;
    var FileSizeMB = (FileSize/5485760).toFixed(2);

    if ( (FileExt != "png" && FileExt != "jpg") || FileSize>5485760)
    {
        var error = "File type : "+ FileExt+"\n\n";
        error += "Size: " + FileSizeMB + " MB \n\n";
        error += "Please make sure your file is in png or jpg format and less than 5 MB.\n\n";
        
        alert(error);
        return false;
    }
    return true;
}
</script>

and here is html code:

 <input type="file"onchange="checkFile(this)"name='sec_2_img'>

• javascript
• html
• dom-events

Share Improve this question Follow edited Mar 13, 2022 at 10:42 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 7, 2016 at 11:31 Ahmed AlviAhmed Alvi 84122 gold badges1212 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You need to clear the value of 'sec_2_img'. You do this by adding fieldObj.value = ""; after alert(error) and before return false;. This will remove the file name from sec_2_img and force user to select a new one while still showing the message so user knows what to do.

1.) Don't use alerts, they are annoying and the browsers will block them pretty fast, so your users won't get any message anymore. Use a modal window or add a styled element with the error-message somewhere into your form.

2.) If you need to have a valid file to submit this form, you have to add a event-handler to the submit-event of the form and stop the trasmission.

3.) your check for file-extension is case-sensitive, this might give you problems on windows, and your calculation of the fileSize is wrong.

本文标签： htmlHow stop file upload event using JavaScriptStack Overflow