Комментарий: Ниже мы используем новый API файла функций HTML 5 для загрузки файлов и отображения процента процессов загрузки файлов. Намерение похоже на следующее: когда выбранный файл, отображается текущая информация о файле.
Здесь мы комбинируем ASP.NET MVC в качестве сервера, и вы также можете использовать другие языки сервера. Давайте посмотрим на HTML этого фрагмента:@Using (html.beginform ("upload", "Home", formmethod.post, new {ectype = "multipart/form-data",}))
{
<div>
<Метка для = "Файл">
Загрузите изображение: </label>
<input type = "file" MALTY = "MOLTE" ONCHANGE = "FILESELED ();" />
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<input type = "button" value = "upload Image" />
</div>
<div>
</div>
}
Связанный JavaScript выглядит следующим образом:
function fileselected () {
var file = document.getElementbyId ('filetoupload'). файлы [0];
if (file) {
var filesize = 0;
if (file.size> 1024 * 1024)
FileSize = (math.round (file.size * 100 / (1024 * 1024)) / 100) .toString () + 'MB';
еще
filesize = (math.round (file.size * 100/1024) / 100) .toString () + 'kb';
document.getElementById ('filename'). innerHtml = 'name:' + file.name;
document.getElementbyId ('forileSize'). innerHtml = 'size:' + fileSize;
document.getElementById ('fileType'). innerHtml = 'type:' + file.type;
}
}
function uploadfile () {
var fd = new FormData ();
fd.append ("filetoupload", document.getElementById ('fileToupload'). файлы [0]);
var xhr = new xmlhttprequest ();
xhr.upload.addeventlistener («Прогресс», uploadprogress, false);
xhr.addeventlistener ("загрузка", uploadcomplete, false);
xhr.addeventlistener ("ошибка", uploadfailed, false);
xhr.addeventlistener («прервать», uploadcancell, false);
xhr.open ("post", "home/upload");
xhr.send (fd);
}
функция uploadprogress (evt) {
if (evt.lengthcomputable) {
var penestcomplete = math.round (evt.laded * 100 /evt.total);
document.getElementById ('ProgressNumber'). innerHtml = проценткомпетте.toString () + '%';
}
еще {
document.getElementbyId ('ProgressNumber'). innerHtml = 'невозможно вычислять';
}
}
функция uploadcomplete (evt) {
/ * Это событие повышается, когда сервер отправляет ответ *//
Alert (evt.Target.ResponseText);
}
функция uploadfailed (evt) {
Alert («Была ошибка, пытающаяся загрузить файл.»);
}
функция uploadcancall (evt) {
Alert («Загрузка была отменена пользователем или браузером, отброшенным соединением».);
}
Выше приведено натуральный JavaScript, который выполняет функцию, извлеченную из файлов в событии OnChange, и выполняет функцию uploadfile в кнопке Click. Здесь используйте xmlhttprequest для реализации файла загрузки Ajax. Обратите внимание, что код может работать в Firefox 14. IE 9 в настоящее время не поддерживает API файла, поэтому вы можете участвовать здесь. Код на стороне сервера очень прост:
Общедоступный класс HomeController: контроллер
{
Public ActionResult Index ()
{
return view ();
}
/// <summary>
/// Загружает указанные файлы.
/// </summary>
/// <param> файлы. </param>
/// <return> actionResult </returns>
[Httppost]
Public ActionResult Загрузка (HttppostedFileBase [] filetoupload)
{
Foreach (файл httppostedfilebase в filetoupload)
{
String path = System.io.path.combine (server.mappath ("~/app_data"), system.io.path.getfilename (file.filename));
file.saveas (path);
}
Viewbag.message = "файл (ы) загружены успешно";
return redirecttoAction («индекс»);
}
}
Автор: Петтер Лю