Я пытаюсь использовать плагин загрузки файла jQuery на своем сайте, но на данный момент это было невозможно, а документация - это худшее, что я когда-либо видел. Единственное, что я вижу, это некоторые демо-файлы с большим количеством строк кода без каких-либо объяснений.jQuery Загрузка файлов плагин не работает
Я попытался использовать его на своем сайте с CSS и JS-файлами, включенными в демонстрации, но плагин для загрузки файлов не отображается так, как должен.
После некоторого исследования, я обнаружил, что метод _renderUpload jquery.fileupload-jquery-ui.js никогда не вызывается. Также не создается метод _create того же файла. Этим методом является ответственность за добавление классов CSS, чтобы загрузка файлов выглядела лучше.
Это HTML-код у меня есть:
<div class="fileupload-buttonbar">
<div class="fileupload-buttons">
<span class="fileinput-button">
<span>Agregar archivo...</span>
<input type="file" name="files[]">
</span>
<button type="submit" class="start">Importar</button>
</div>
<div class="fileupload-progress fade" style="display:none">
<!-- The global progress bar -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<table role="presentation"><tbody class="files"></tbody></table>
И это инициализация:
$(function() {
$('#fileupload').fileupload({
url: '@Url.Action("Import")',
disableImageResize: false,
maxFileSize: 30000,
acceptFileTypes: /(\.|\/)(csv|txt|xls|xlsx)$/i,
singleFileUploads: true,
autoUpload: false,
maxNumberOfFiles: 1,
change: function (e, data) {
alert(data.files.length);
$.each(data.files, function (index, file) {
$('#import_file').text(file.name);
$('button#import').attr('style', 'display: ');
$('span#status').text('');
});
},
add: function (e, data) {
alert(data.files);
data.context = $('button#import')
.click(function() {
data.context = $('span#status').text('Importando...');
$('button#import').attr('style', 'display: none');
data.submit();
});
},
done: function (e, data) {
data.context.text('Completo.');
$("#administradores").trigger("reloadGrid", [{ page: 1 }]);
}
});
$('#fileupload').addClass('fileupload-processing');
}
И, наконец, я сказал, что я в том числе следующий файл CSS: jquery.fileupload- ui.css
И это файлы JS в следующем порядке:
- jquery.ui.widget.js
- jquery.iframe-transport.js
- jquery.fileupload.js
- jquery.fileupload-process.js
- jquery.fileupload-validate.js
- jquery.fileupload-ui.js
- jquery.fileupload-JQuery-ui.js
Любая помощь будет принята с благодарностью
Thanks Jaime
проверка пример. в html есть много кода, чтобы показать индикатор выполнения и список. –
что-то вроде