javascript - 如何只计算有效的 jquery 文件上传？

Question

在使用 jquery file upload 上传多张图片后，我正在尝试刷新我的上传页面.

我目前正在计算添加的文件数量，如果它们与成功上传的数量相匹配，我就会刷新页面。在用户尝试上传无效的文件类型或太小的图像之前，这非常有用。如何将这些故障包括在我的总数中？是否有首选方法来执行此操作？

    $('#fileupload').fileupload({
        acceptFileTypes: /(\.|\/)(jpe?g|png)$/i
    });

    var filesqueued = null; 
    var filesuploaded = 0;

    $('#fileupload').bind('fileuploadadd', function (e, data) {
        filesqueued = data.originalFiles.length;
    });


    $('#fileupload').bind('fileuploaddone', function (e, data) {
        filesuploaded = filesuploaded + 1;

        if (filesuploaded == filesqueued) {
            filesuploaded = 0;
            location.reload();
        }
    })

Answer 1

您可以使用 jQuery 文件上传的内置事件来绑定(bind)成功和失败事件:

$('#fileupload').bind('fileuploadcompleted', function (e, data) {
    /* Successful upload */
        filesuploaded = filesuploaded + 1;
});

$('#fileupload').bind('fileuploadfailed', function (e, data) {
    /* Failed upload */
    // [...]
});

更多信息来自他们的文档:https://github.com/blueimp/jQuery-File-Upload/wiki/Options

或者，您可以在服务器端执行所有操作。让您的上传处理程序(jQuery 文件上传的 url 选项)响应:

<?php
if ( $valid == false ) {
    echo 'invalid';
    // or echo( json_encode( array( 'result' => 'invalid' ) ) );
}

然后回到 jQuery 分析返回的数据:

$('#fileupload').bind('fileuploaddone', function (e, data) {
    /* Check returned data */
    // Could use JSON or simple text output
    // if ( data.result == 'invalid' ) {
    if ( data == 'invalid' ) {
        // file did not pass
    } else {
        // file uploaded fine
        filesuploaded = filesuploaded + 1;
    }

    if (filesuploaded == filesqueued) {
        filesuploaded = 0;
        location.reload();
    }
})