|
Обновлено 24 февраля 2016
Загрузка файла на сервер с индикатором прогресса (JS+JQuery+VB.NET)
|
| 01 | На заметку: |
Имеем ввиду, что читатель знаком с JQuery и процесс его подключения и использования опущен.
|
|
| 02 |
Скрипт отвечающий за отправку на стороне клиента: |
|
| 03 | JavaScript |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 var uploadPath = "/files/upload"; // Метод Post контроллера получающего файл
$(document).ready(function () {
// Проверяем поддерживает ли браузер FileAPI и XmlHttpRequest
if (window.File && window.FileReader && window.FileList && window.Blob && new XMLHttpRequest().upload) {
//var fileInput = $('#fileInput'); //контрол Input для выбора файлов
//// Подписываемся на события выбора файлов через контрол Input
//// (доступ к колекции файлов FileList можно получить через свойство files - this.files)
//fileInput.bind({
// change: function () {
// displayFiles(this.files); //Запускаем процесс отображения файлов и отправки их на сервер
// }
//});
bind_dropBox(); // Привязываем события Drag'n'Drop - к соответствующему объекту
}
});
function bind_dropBox() {
var dropBox = $('#dropBox'); //контрол DragDrop
dropBox.bind({
dragenter: function (e) {
e.preventDefault(); // Здесь и далее необходимо пресечь распространение события, чтобы исключить
e.stopPropagation(); // загрузку изображения браузером
$(this).addClass('highlighted');
},
dragover: function (e) {
e.preventDefault();
e.stopPropagation();
if (!($(this).hasClass('highlighted'))) { $(this).addClass('highlighted'); }
},
dragleave: function (e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('highlighted');
},
drop: function (e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('highlighted');
var dt = e.originalEvent.dataTransfer;
if (dt.files.length == 0) {return;}
//Нам нужен только первый файл
var file = dt.files[0];
sendFile(file);
}
});
}
function sendFile(file) {
//Показываем индикатор прогресса
$('#progressBar').show();
$('#dropTitle').hide();
getImage(file); // Отображаем динамически полученное изображение, если нужно
uploadFile(file); // Начинаем отправку на сервер
}
// Функция отправки файлов на сервер
function uploadFile(file) {
var xhr = new XMLHttpRequest();
var bar = $('#prBarLineBlock'); // Получаем бар для отбражения прогресса загрузки
var value = $('#prBarText'); // Получаем поле для текста для отбражения прогресса загрузки
xhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
var percentageUploaded = parseInt(e.loaded / e.total * 100);
// Информируем пользователя о прогрессе
$(bar).css("width", percentageUploaded + "%");
$(value).html(percentageUploaded + '% (' + fileSizeToString(e.loaded) + ' из ' + fileSizeToString(e.total) + ')');
}
}, false);
// Что делаем когда все байты переданы - файл загружен
xhr.addEventListener("load", function () {
// ...
$(bar).css("width", "0%");
}, false);
// Смотрим, что ответил сервер
xhr.onreadystatechange = (function (ufile) {
return function (e) {
if (this.readyState == 4) {
if (this.status == 200) {
$('#content').html(this.responseText); // Заменяем существующее содержимое блока <div id="content"></div> ответом полученным от сервера
setImgPreview(); // Повторно показываем изображение
bind_dropBox(); // Повторно привязываем события Drag'n'Drop к вновь полученному содержимому
// Если необходимо - производим манипуляции с контентом
//$('#dropBox').html('<img id="preview"/ style="height:auto; width:100%;">');
//if (imgsrc != null) {
// var img = $('#preview');
// $(img).attr('src', imgsrc)
// }
}
else {
alert('Ошибка');
}
$('#progressBar').hide(); // Скрываем прогресс бар
}
}
})(file);
xhr.open('POST', uploadPath); // Формируем запрос, адрес метода хранится в переменной uploadPath в начале скрипта
var formData = new FormData();
formData.append(file.name, file); // Наполняем его содержимым
xhr.send(formData); // Отправляем на сервер
}
var imgsrc = null;
function getImage(file) { // Функция отвечающая за отображение получаемого изображения в объекте DropBox
imgsrc = null; // Обнуляем переменную для хранения изображения
//В случае если нам нужно отфильтровать файлы по типу, например, только для изображений
//мы сможем создать миниатюры - добавляем инструкции по фильтрованию
if (file.type.match('^image/')) {
//Создаем миниатюры изображений
var reader = new FileReader();
reader.onload = (function (ufile) { // Добавляем дополнительную функцию для сохранения в теле функции информации о файле
return function (e) {
//var img = $('#preview');
//$(img).attr("height", "auto"); //Задаем фиксированный размер для всех изображений - высота 100px.
//$(img).attr("width", "100%"); //Задаем фиксированный размер для всех изображений - высота 100px.
//$(img).attr('src', e.target.result);
imgsrc = e.target.result;
setImgPreview();
};
})(file);
// Начинаем чтение файла data URL.
reader.readAsDataURL(file);
}
else {
//Если необходимо - логируем, либо как-то иначе показываем пользователю, что файл
//выбран некорректно.
}
}
function setImgPreview() {
$('#dropBox').css("border","none");
$('#dropBox').html('<img id="preview"/>');
var img = $('#preview');
if (imgsrc != null) {
$(img).attr('src', imgsrc)
}
}
//Служебная функция получения размера файла.
function fileSizeToString(size) {
var sizeStr = "";
if (parseInt(size) < 1024) {
sizeStr = size.toFixed(2) + " Bytes";
}
else if (parseInt(size / 1024) < 1024) {
var sizeKB = size / 1024;
sizeStr = sizeKB.toFixed(2) + " KB";
}
else if (parseInt(size / 1024 / 1024) < 1024) {
var sizeMB = size / 1024 / 1024;
sizeStr = sizeMB.toFixed(2) + " MB";
}
else {
var sizeGB = size / 1024 / 1024 / 1024;
sizeStr = sizeGB.toFixed(2) + " GB";
}
return sizeStr;
} |
uploadfile.js
|
| 04 |
Разметка страницы-представления: |
|
| 05 | HTML |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <!DOCTYPE html>
<html> ... |
|
| 06 |
Метод контроллера: |
|
| 07 | VB.NET |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <HttpPost()> _
Public Function UploadFile() As ActionResult ... |
|
| 08 |
Изменение ограничения на размер передаваемого файла. По умолчанию максимальный размер запроса в килобайтах равен 4096 КБ (4 МБ). Таким образом сервер будет игнорировать передачу файлов большего размера. Это значение меняется параметром MaxRequestLength элемента HttpRuntime (файл Web.config): |
|
| 09 | XML |
1 2 3 <system.web>
<httpRuntime <>maxRequestLength = "25000"</>/>
</system.web> |
|
| 11 |
Похожие запросы:
|
|