Обновлено 24 февраля 2016
Кравченко Виктор

Загрузка файла на сервер с индикатором прогресса (JS+JQuery+VB.NET)

VB.NET JQuery JavaScript Полезные функции Web
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>
<head> <meta name="viewport" content="width=device-width" /> <title></title> </head>
<body> <script src="../../Scripts/uploadfile.js" type="text/javascript"></script> @* Progress Bar Style *@
<style type="text/css"> #prBarLine { position: relative; display: inline-block; padding: 1px; border: 1px solid rgb(;200,200,200&#041;; height: 6px; margin-top: .4em; width: 300px; } #prBarLineBlock { position: relative; height: 100%; background-color: rgba(;0, 85, 204, 0.8&#041;; } </style>
<div id="dropBox" class="exif-outer"> <div id="dropTitle" class="exif-inner">Перетащите файл в эту область, или кликните сюда для выбора.</div> <div id="progressBar" class="exif-inner" style="display:none;"> <div id="prBarLine"> <div id="prBarLineBlock" style="width:0%"> @*А это прогресс бар*@ </div> </div> <div id="prBarText"></div> </div> </div> </body>
</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 If Request.Files.Count > 0 Then 'Получаем содержимое запроса Dim sr As StreamReader = New StreamReader(Request.InputStream) Dim fileContent As String = sr.ReadToEnd 'Здесь содержимое запроса ' или Dim file As HttpPostedFileBase = Request.Files(0) Dim img As Image = Image.FromStream(file.InputStream)
' Далее делаем с изображением, что нужно и возвращаем представление ' ...
End If Return PartialView("upload") End Function
08

Изменение ограничения на размер передаваемого файла.

По умолчанию максимальный размер запроса в килобайтах равен 4096 КБ (4 МБ). Таким образом сервер будет игнорировать передачу файлов большего размера. Это значение меняется параметром MaxRequestLength элемента HttpRuntime (файл Web.config):

09 XML
1
2
3
<system.web>
<httpRuntime <b>maxRequestLength = "25000"</b>/>
</system.web>
11

Похожие запросы:

  • How to upload image in ASP.NET MVC using ajax or any other technique without postback?
  • How to show the selected image file without saving file in the disk before upload
  • What is the MAX file upload size limit in ASP.net?
  • How to upload large files using MVC?
comments powered by HyperComments

Яндекс.Метрика