Плагин загрузки файла JQuery: как проверить файлы при добавлении?

Ответ 1

Вот что вы хотите сделать:

$('#fileupload')
    .fileupload({
        acceptFileTypes: /(\.|\/)(jpg)$/i
    })
    .bind('fileuploadadded', function (e, data) {
        console.log(data.files.valid);
    });

Ядро jquery.fileupload.js файл добавляет ваши файлы и запускает событие "fileuploadadd", но до того, как файлы будут проверены.

Файл jquery.fileupload-ui.js выполняет проверку после добавления файлов и запускает другое событие "fileuploadadded" после этого.

Измените событие, и все установлено.

Обратите внимание:

Этот ответ был действительным и работал с марта 2013 года, когда он был опубликован. Похоже, этот плагин для загрузки изменился с тех пор. Это означает, что есть новая проблема, и вы должны опубликовать новый вопрос (или выполнить поиск, чтобы увидеть, есть ли у кого-то уже есть), а не понизить его!

Ответ 2

Мне нужно было выполнить валидацию с текущей версией плагина (5.39.1), и это работает для меня:

Обязательно включите jquery.fileupload-process.js и jquery.fileupload-validate.js в этом порядке после jquery.fileupload.js и до инициализации script.

В вашей инициализации script добавьте параметры проверки и проверьте правильность в обратном вызове fileuploadprocessalways:

$('.fileinput').fileupload({
    // The regular expression for allowed file types, matches
    // against either file type or file name:
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    // The maximum allowed file size in bytes:
    maxFileSize: 10000000, // 10 MB
    // The minimum allowed file size in bytes:
    minFileSize: undefined, // No minimal file size
    // The limit of files to be uploaded:
    maxNumberOfFiles: 10
  }).on('fileuploadprocessalways', function (e, data) {
    var currentFile = data.files[data.index];
    if (data.files.error && currentFile.error) {
      // there was an error, do something about it
      console.log(currentFile.error);
    }
  });

Все проверки необязательны, просто не оставляйте те, которые вам не нужны. undefined.

Ответ 3

Это то, что я сделал, и это работало для меня для более новых версий: Я создал одну проверку для каждого типа файла и его размер.

$("#fileUploadArea").fileupload({
        dataType: 'json',
        url:'${upload}',
        multiple:true,
        autoSubmit:false,
        maxNumberOfFiles: Number('${quantidadeMaximaArquivosUpload}'),
        dynamicFormData: function()
        {
            var data ={ 
                    idEntidadeEmpresarial: $('#idEntidadeEmpresarial').val(),
                    idDominioFamilia: $('#idDominioFamilia').val(),
                    idSubgrupo: $('select[id^="subgrupo_').map(function(){return $(this).val();}).get(),
                    descricao: $('#descricao').val(),
                    validade: $('#validade').val()
            }
            return data;
        },
        headers: {
            Accept: "application/json"
        },
        accept: 'application/json',        
        imageMaxWidth: 800,
        imageMaxHeight: 800,
        imageCrop: true ,
        stop: function(){
            $.unblockUI();
            if($('#fechar').is(":checked")){
                window.close();
            }else{
                $('select[id^="subgrupo_').each(function(){
                    $(this).val('');
                    $(this).trigger("chosen:updated");
                })
                $('#validade').val('');
                $('#descricao').val('');
                $('#sucesso').html('');
                $('#sucesso').append('<p><spring:message code="upload.sucesso"/>');
                $('#sucesso').show();
            }
        },
        error: function(files,status,errMsg)
        {
            $('#erro').html('');
            $('#erro').append('<p>'+errMsg+'</p>');
            $('#erro').show();
        },
        acceptFileTypes : ${listaExtensaoPermitidas}
    }).on('fileuploadprocessalways', function (e, data) {
        var currentFile = data.files[data.index];

        var tamanho = currentFile.size;
        var extensao = currentFile.name.substring(currentFile.name.lastIndexOf(".") +1,currentFile.name.length);            

        if(hashExtensao.get(extensao.toUpperCase()) < tamanho){
            alert("file type max size "+hashExtensao.get(extensao.toUpperCase());
            data.abort();
        }

    });

Ответ 4

Ну, ответ @jszbody - идеальный ответ.

Однако, как и я, если кто-то приземляется здесь, ищет решение аналогичной проблемы, когда пользователь хочет знать, правильно ли файл добавлен.

blueimp jquery-file-upload Не выдает ошибку при неудачном добавлении

Ответ 5

Это то, что вы хотите сделать с новой версией плагина (9.11.2): Включите эти файлы:
 - jquery.ui.widget.js
 - jquery.iframe-transport.js
 - jquery.fileupload.js
 - jquery.fileupload-process.js
 - jquery.fileupload-validate.js

$('#fileupload')
.fileupload({
    acceptFileTypes: /(\.|\/)(jpg)$/i
})
.on('fileuploadadd', function (e, data) {
    console.log('validation object not available at this point. Do not do submit here');
})
.on('fileuploadprocessalways', function (e, data) {
    console.log(data.files.error);//true if error
    console.log(data.files[0].error);//error message
    if(!data.files.error) data.submit(); //do submission here
});