Question

我有带文件上传（图像）的表单，我想将这些图像限制为500KB大小。但是，现在表格没有提交和idk为什么。这是jQuery中的代码

$('form').on('submit', function(e) {
e.preventDefault();
});


$('input:file').change(
function(e) {
    var files = e.originalEvent.target.files;
    for (var i=0, len=files.length; i<len; i++){
        var n = files[i].name,
            s = files[i].size,
            t = files[i].type;

        if (s > 500000) {

            $('.submit-btn1').click(function(){

                alert('Please deselect this file: "' + n + '," it\'s larger than the maximum filesize allowed (500KB). Sorry!');
                return false;
            })

        }
    }
})

$('input:file').change(
function(e) {
    var files = e.originalEvent.target.files;
    for (var i=0, len=files.length; i<len; i++){
        var n = files[i].name,
            s = files[i].size,
            t = files[i].type;

        if (s > 500000) {

            $('.submit-btn2').click(function(){

                alert('Please deselect this file: "' + n + '," it\'s larger than the maximum filesize allowed (500KB). Sorry!');
                return false;
            })

        }
    }
})

这是两种不同的形式。它昨天工作，但现在它不工作。当我删除e.preventDefault（）;它工作，但问题是，一旦我上传大于500KB的图片，消息弹出，我不能提交表格（这是好的），我将图片更改为小于500KB，当我再次尝试提交时，消息仍然弹出。看起来我首次上传的大于500KB的图片仍在使用，如果我上传普通的图片无关紧要。

请帮助。

Answer 1

在更正文件大小后仍然看到错误的原因是因为单击处理程序仍然已注册。如果你想保持这种格式，点击处理程序在更改处理程序中注册，你还需要一个else语句，说明应该关闭点击处理程序。

我更喜欢一个更简洁的解决方案，您可以在其中定义一个标志变量，例如fileSizeAcceptable，它以true开头，然后切换到false如果文件太大则更改处理程序，如果文件太大则设置为true。然后，在您的点击处理程序中，在提交表单之前检查该值。

这些方面的东西：

var fileSizeAcceptable = true;

$('input:file').change(function(e) {
    var files = e.originalEvent.target.files;
    for (var i=0, len=files.length; i<len; i++){
        var n = files[i].name,
            s = files[i].size,
            t = files[i].type;

        if (s > 500000) {
            fileSizeAcceptable = false;
        } else {
            fileSizeAcceptable = true;
        }
    }
})

$('.submit-btn1').click(function(){
    if (!fileSizeAcceptable) {
        alert('Please deselect this file: "' + n + '," it\'s larger than the maximum filesize allowed (500KB). Sorry!');
        return false;
    }
})

Answer 2

在您的代码中，您永远不会让表单提交。上传＆＃39;的终点

总是停止行动

$('form').on('submit', function(e) {
e.preventDefault();
});

我已经更改了您的逻辑和文件验证顺序，定义了一个标记，用于检查文件是否大于FINALY，决定是否提交表单。

检查this codepen，我希望您能理解您的问题：）

由于JS

2 个答案: