如何只计算有效的jquery文件上传?

时间:2012-07-22 21:00:48

标签: javascript jquery image-processing

我正在尝试使用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();
        }
    })

1 个答案:

答案 0 :(得分:3)

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

$('#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();
    }
})