JQuery FileUpload не запускает 'done'

Я использую плагин jQuery-File-Upload. Я написал простой код, чтобы проверить его - и он работает, но не без проблем. Он не запускает done, даже если файл загружен, а индикатор выполнения достиг своего конца.

Здесь код:

$('#file_file').fileupload({
    dataType: 'json',
    autoUpload: true,
    add: function (e, data) {
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
    done: function (e, data) {
        alert('Done');
    }
});

Мой вход такой же простой:

<input type="file" id="file_file" name="file[file]" />

Ответы

Ответ 1

Я изменил пару вещей, и это сработало. Здесь:

$('#file_file').fileupload({
    autoUpload: true,
    add: function (e, data) {
        $('body').append('<p class="upl">Uploading...</p>')
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
    done: function (e, data) {
        $('.upl').remove();
        $.each(data.files, function (index, file) {
            /**/
        });
    }
});

Ответ 2

Если ваш сервер не возвращает JSON, попробуйте удалить:

dataType: 'json'

В противном случае вы можете получить событие сбоя, которое легко проверить для:

fail: function(e, data) {
  alert('Fail!');
}

Ответ 3

Я отремонтировал с помощью autoUpload: true, похоже, когда свойство autoUpload не установлено (даже если загрузка работает как ожидалось), выполненное событие не запускается.

Ответ 4

Экспериментировано сегодня! Если вы используете PHP, убедитесь, что ваш файл uploadhanler PHP не отображает ошибку или предупреждение. Он создает плохой вывод JSON, и когда ваш файл загружен, плагин не может отправить правильный буфер JSON с выполненным событием.

Для отслеживания ошибок в вашем PHP файле лучше писать файл журнала вместо ошибок отображения на таких скриптах. Вы можете использовать:

error_reporting(0)

Но НЕ ЗАБУДЬТЕ, чтобы добавить отслеживание ошибок в файл журнала. Конечно!

Ответ 6

Я использую multer, multer-azure-storage и blueimp-file-upload. все от unpkg.com. ниже приведена множественная загрузка файла с помощью триггера. работающих по состоянию на 10/22/17.

js файл:

  <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/[email protected]/js/vendor/jquery.ui.widget.js"></script>
  <script src="https://unpkg.com/[email protected]/js/jquery.iframe-transport.js"></script>
  <script src="https://unpkg.com/[email protected]/js/jquery.fileupload.js"></script>

page html, подается из экспресс:         

      $('#fileupload').fileupload({
          url: 'https://domainwhatevs/my-listings/edit/[property id]/gallery',
          paramName: '_file',
          dataType: 'json',
          type: 'POST',
          autoUpload: true,
          add: function (e, data) {
              console.log('uploading:', data)
              data.submit();
          },
          done: function (e, data) {
              console.log('done triggered');
              console.log(data._response.result.result[0].originalname, 'uploaded at', data._response.result.result[0].url);
              $.each(data.files, function (index, file) {
                // console.log(file.name, 'uploaded.')
                // console.log('done');
                // console.log(index);
                // console.log(file);
              });
              console.log(data);
          }
      });

//GET/my-listings/edit/[property id]/gallery

app.get(
    [
        '/my-listings/edit/:_id/gallery'
    ],
    (req, res) => {
        console.log('image gallery:', req.params._id);
        res.render('my-listings--edit--gallery', {
            _id: req.params._id,
            session: req.session
        });
    }
);

//POST/my-listings/edit/[property id]/gallery

 app.post(
    [
        '/my-listings/edit/:_id/gallery'
    ],
    upload.array('_file'),
    (req, res, next) => {
        console.log(req.files);
        res.setHeader('Content-Type', 'application/json');
        res.send({result: req.files});
        next();
    }
);

Ответ 7

 $(input).fileupload(

       url      : '...'

      ,dataType : 'json'
      ,sequentialUploads : true

       ,add      : function (e,data) {


           $.each(data.files,function(i,file){

                file.jqXHR = data.submit()
                           .success(function (result, textStatus, jqXHR) {/* ... */})
                           .error(function (jqXHR, textStatus, errorThrown) {
                             })
                           .complete(function (result, textStatus, jqXHR) { 
                               //...                   
                                     });

                 });
       }


       ,done: function (e, data) {
         console.log(data);

       }


   });

отлично работает для меня;

Различия

заключаются в

  • url установлен (надеюсь, вы просто забыли поместить его в свой фрагмент здесь);

  • способ добавления файла в очередь загрузки

  • последовательная загрузка (?)

изменить:

Плагин загрузки файла jQuery использует jQuery.ajax() для файла загружать запросы. Это справедливо даже для браузеров без поддержки XHR, благодаря плагину Iframe Transport.

Параметры, установленные для плагина загрузки файлов, передаются в jQuery.ajax() и позволяют определять любые настройки ajax или обратные вызовы. Параметры ajax processData, contentType и cache установлены в false для файла загружает на работу и не следует изменять.

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

где-то в вашем коде вы могли бы также изменить те настройки ajax; во всяком случае, это говорит о том, что если у вас есть свои настройки правильно, так как он использует $.ajax, это не может быть вызвано