Всплывающее окно при закачке файлов на js

@Gauga · Регистрация: 04.07.2013

Студворк — интернет-сервис помощи студентам

Привет, мир! Суть вопроса такова, пользователь при закачке файлов на сервер, должен видеть сообщение о том, что файл загружается и перезагружать страницу не надо. Уважаемые форумчане, поделитесь пожалуйста простым примером, отображение подобных оповещений. Слышал что это делается при помощи событий. Но как, и в какую сторону нужно капать, я не знаю.

P.S. Хочется чтоб во время загрузке файла, открывалось всплывающее окно, а по завершению выводилось сообщение с успешным завершением выгрузке файла. И перенаправляло на главную страницу (но с перенаправлением, я сам справлюсь).

@Unick · 08.11.2013, 06:22

Gauga, http://javascript.ru/blog/gord... -javascrip
Или через jq
http://habrahabr.ru/post/200916/
или еще лучше и понятнее
http://cocainum.info/post/179/

@Padimanskas · 08.11.2013, 07:04

Попробуем соорудить тест

Этот PHP код поместим на сервер в виде файла под именем "upload_file.php":

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$output_dir = "uploads/";
 
 
if(isset($_FILES["myfile"]))
{
    //Filter the file types , if you want.
    if ($_FILES["myfile"]["error"] > 0)
    {
      echo "Error: " . $_FILES["file"]["error"] . "<br>";
    }
    else
    {
        //move the uploaded file to uploads folder;
        move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
    
     echo "Uploaded File :".$_FILES["myfile"]["name"];
    }
 
}
?>

и скачаем плагин AjaxForm, а после этого встроим путь к нему в тег head сайта. Вот архив с плагином: jquery.form.rar

Вот страница index.html, с помощью которой будем загружать файлы.

HTML5
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
<!DOCTYPE HTML>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <title>Upload file</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://malsup.github.io/jquery.form.js"></script>
 
 
    <style>
        body {
            color: #4E4E4E;
            font-size:16px;
            font-family:sans-serif;
        }
        
        #progress {
            width:400px;
            height:300px;
            border:1px solid black;
            margin:auto;
            text-align:center;
 
        }
        
        #bar {
            border:1px solid black;
            display:inline-block;
            width:200px;
            height:30px;
            text-align:center;
            line-height:30px;
        }
        #message {
            display:inline-block;
            padding:10px;
        }
    </style>
</head>
 
<body>
 
    <div id="progress">
        <div id="bar">
            <span id="percent">0%</span>
        </div>
        <span id="message"></span>
    </div>
 
<form id="myForm" action="upload_file.php" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Send file">
</form>
 
    <script>
 
        $(document).ready(function() {
 
            var options = {
                beforeSend: function() {
                    $("#progress").show();
                    //clear everything
                    $("#bar").width('0%');
                    $("#message").html("");
                    $("#percent").html("0%");
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    $("#bar").width(percentComplete + '%');
                    $("#percent").html(percentComplete + '%');
 
                },
                success: function() {
                    $("#bar").width('100%');
                    $("#percent").html('100%');
 
                },
                complete: function(response) {
                    $("#message").html("<font color='green'>" + response.responseText + "</font>");
                },
                error: function() {
                    $("#message").html("<font color='red'> ERROR: unable to upload files</font>");
 
                }
            };
 
            $("#myForm").ajaxForm(options);
 
        });
    </script>
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Gauga 25 / 25 / 6 Регистрация: 04.07.2013 Сообщений: 260

	Всплывающее окно при закачке файлов на js 08.11.2013, 02:27. Показов 2473. Ответов 2 Метки нет (Все метки) Привет, мир! Суть вопроса такова, пользователь при закачке файлов на сервер, должен видеть сообщение о том, что файл загружается и перезагружать страницу не надо. Уважаемые форумчане, поделитесь пожалуйста простым примером, отображение подобных оповещений. Слышал что это делается при помощи событий. Но как, и в какую сторону нужно капать, я не знаю. P.S. Хочется чтоб во время загрузке файла, открывалось всплывающее окно, а по завершению выводилось сообщение с успешным завершением выгрузке файла. И перенаправляло на главную страницу (но с перенаправлением, я сам справлюсь). 0

@Unick не Администратор ^_^ 988 / 223 / 23 Регистрация: 03.05.2009 Сообщений: 1,493 Записей в блоге: 1
	08.11.2013, 06:22
	Gauga, http://javascript.ru/blog/gord... -javascrip Или через jq http://habrahabr.ru/post/200916/ или еще лучше и понятнее http://cocainum.info/post/179/ 1