Blueimp/jQuery-File-Upload интеграция с mysql по документацией

@_Erik_ · Регистрация: 27.02.2012

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

Добрый день, вечер, ночь дорогие форумчане. Есть некий api blueimp/jQuery-File-Upload Не получается банально интегрировать с mysql там есть пример но я совсем "тю-тю"
Вот демо скрипта
Вот документация по интеграции

не пойму почему не получается

что я делаю не так?

Кликните здесь для просмотра всего текста

взял добавил в базу

SQL
1
2
3
4
5
6
7
8
9
10
CREATE TABLE `files` (
  `id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(255) DEFAULT NULL,
  `size` INT(11) DEFAULT NULL,
  `type` VARCHAR(255) DEFAULT NULL,
  `url` VARCHAR(255) DEFAULT NULL,
  `title` VARCHAR(255) DEFAULT NULL,
  `description` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

создал index.php, вел данные базы (localhost root example)

PHP
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
<?php
$options = array(
    'delete_type' => 'POST',
    'db_host' => 'localhost',
    'db_user' => 'root',
    'db_pass' => '',
    'db_name' => 'example',
    'db_table' => 'files'
);
 
error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
 
class CustomUploadHandler extends UploadHandler {
 
    protected function initialize() {
        $this->db = new mysqli(
            $this->options['db_host'],
            $this->options['db_user'],
            $this->options['db_pass'],
            $this->options['db_name']
        );
        parent::initialize();
        $this->db->close();
    }
 
    protected function handle_form_data($file, $index) {
        $file->title = @$_REQUEST['title'][$index];
        $file->description = @$_REQUEST['description'][$index];
    }
 
    protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
            $index = null, $content_range = null) {
        $file = parent::handle_file_upload(
            $uploaded_file, $name, $size, $type, $error, $index, $content_range
        );
        if (empty($file->error)) {
            $sql = 'INSERT INTO `'.$this->options['db_table']
                .'` (`name`, `size`, `type`, `title`, `description`)'
                .' VALUES (?, ?, ?, ?, ?)';
            $query = $this->db->prepare($sql);
            $query->bind_param(
                'sisss',
                $file->name,
                $file->size,
                $file->type,
                $file->title,
                $file->description
            );
            $query->execute();
            $file->id = $this->db->insert_id;
        }
        return $file;
    }
 
    protected function set_additional_file_properties($file) {
        parent::set_additional_file_properties($file);
        if ($_SERVER['REQUEST_METHOD'] === 'GET') {
            $sql = 'SELECT `id`, `type`, `title`, `description` FROM `'
                .$this->options['db_table'].'` WHERE `name`=?';
            $query = $this->db->prepare($sql);
            $query->bind_param('s', $file->name);
            $query->execute();
            $query->bind_result(
                $id,
                $type,
                $title,
                $description
            );
            while ($query->fetch()) {
                $file->id = $id;
                $file->type = $type;
                $file->title = $title;
                $file->description = $description;
            }
        }
    }
 
    public function delete($print_response = true) {
        $response = parent::delete(false);
        foreach ($response as $name => $deleted) {
            if ($deleted) {
                $sql = 'DELETE FROM `'
                    .$this->options['db_table'].'` WHERE `name`=?';
                $query = $this->db->prepare($sql);
                $query->bind_param('s', $name);
                $query->execute();
            }
        } 
        return $this->generate_response($response, $print_response);
    }
 
}
 
$upload_handler = new CustomUploadHandler($options);

Дальше не понимаю
Здесь написано
Что значит Client-side file upload initialization: и Client side upload template additions: и Client side download template additions:

ссылка на скачивание

@Para bellum · 20.09.2016, 10:00

Сообщение от _Erik_

Client-side file upload initializatio

Запуск jQUery plugin'а, отвечающего за отправку формы. Естественно, что без подключения и запуска ничего не будет работать, как требуется.

@_Erik_ · 20.09.2016, 10:37 **[ТС]**

Сообщение от Para bellum

Запуск jQUery plugin'а, отвечающего за отправку формы. Естественно, что без подключения и запуска ничего не будет работать, как требуется.

А как это подключить?

вообще хочу реализовать

@_Erik_ · 20.09.2016, 14:07 **[ТС]**

Нашел куда ставить

JavaScript
1
2
3
4
5
6
7
Client-side file upload initialization:
 
$('#fileupload').fileupload({
    url: 'server/php/'
}).on('fileuploadsubmit', function (e, data) {
    data.formData = data.context.find(':input').serializeArray();
});

в js/main.js
Осталось объяснить мне куда ставить
Client side upload template additions:
Client side download template additions:

Добавлено через 1 час 4 минуты
если кто будет читать что бы при обновлении страницы картинки не сохранялись надо закоментить

Кликните здесь для просмотра всего текста

UploadHandler.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   /*public function get($print_response = false) {
        if ($print_response && $this->get_query_param('download')) {
            return $this->download();
        }
        $file_name = $this->get_file_name_param();
        if ($file_name) {
            $response = array(
                $this->get_singular_param_name() => $this->get_file_object($file_name)
            );
        } else {
            $response = array(
                $this->options['param_name'] => $this->get_file_objects()
            );
        }
        return $this->generate_response($response, $print_response);
    }
*/

Добавлено через 1 час 29 минут
index.html
вписал после

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
<span>Title:</span><br>
    <input name="title[]" class="form-control">
</label>
<label class="description">
    <span>Description:</span><br>
    <input name="description[]" class="form-control">
</label>

Добавлено через 29 секунд
Client side download template additions:

вот это теперь что

Добавлено через 4 минуты

PHP
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
<?php
$options = array(
    'delete_type' => 'POST',
    'db_host' => 'localhost',
    'db_user' => 'root',
    'db_pass' => '',
    'db_name' => 'test4',
    'db_table' => 'files'
);
 
error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
 
class CustomUploadHandler extends UploadHandler {
 
    protected function initialize() {
        $this->db = new mysqli(
            $this->options['db_host'],
            $this->options['db_user'],
            $this->options['db_pass'],
            $this->options['db_name']
        );
        parent::initialize();
        $this->db->close();
    }
 
    protected function handle_form_data($file, $index) {
        $file->title = @$_REQUEST['title'][$index];
        $file->description = @$_REQUEST['description'][$index];
    }
 
    protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
            $index = null, $content_range = null) {
        $file = parent::handle_file_upload(
            $uploaded_file, $name, $size, $type, $error, $index, $content_range
        );
        if (empty($file->error)) {
            $sql = 'INSERT INTO `'.$this->options['db_table']
                .'` (`name`, `size`, `type`, `title`, `description`)'
                .' VALUES (?, ?, ?, ?, ?)';
            $query = $this->db->prepare($sql);
            $query->bind_param(
                'sisss',
                $file->name,
                $file->size,
                $file->type,
                $file->title,
                $file->description
            );
            $query->execute();
            $file->id = $this->db->insert_id;
        }
        return $file;
    }
 
    protected function set_additional_file_properties($file) {
        parent::set_additional_file_properties($file);
        if ($_SERVER['REQUEST_METHOD'] === 'GET') {
            $sql = 'SELECT `id`, `type`, `title`, `description` FROM `'
                .$this->options['db_table'].'` WHERE `name`=?';
            $query = $this->db->prepare($sql);
            $query->bind_param('s', $file->name);
            $query->execute();
            $query->bind_result(
                $id,
                $type,
                $title,
                $description
            );
            while ($query->fetch()) {
                $file->id = $id;
                $file->type = $type;
                $file->title = $title;
                $file->description = $description;
            }
        }
    }
 
    public function delete($print_response = true) {
        $response = parent::delete(false);
        foreach ($response as $name => $deleted) {
            if ($deleted) {
                $sql = 'DELETE FROM `'
                    .$this->options['db_table'].'` WHERE `name`=?';
                $query = $this->db->prepare($sql);
                $query->bind_param('s', $name);
                $query->execute();
            }
        } 
        return $this->generate_response($response, $print_response);
    }
 
}
 
$upload_handler = new CustomUploadHandler($options);

еще проблемка как в базу время записать....

@Para bellum · 20.09.2016, 15:00

Сообщение от _Erik_

как в базу время записать....

Добавьте в таблицу поле, в конец, например. И поменяйте это:

PHP
1
2
3
$sql = 'INSERT INTO `'.$this->options['db_table']
                .'` (`name`, `size`, `type`, `title`, `description`)'
                .' VALUES (?, ?, ?, ?, ?)';

На

PHP
1
2
3
$sql = 'INSERT INTO `'.$this->options['db_table']
                .'` (`name`, `size`, `type`, `title`, `description`)'
                .' VALUES (?, ?, ?, ?, ?, NOW())';

@_Erik_ · 20.09.2016, 15:05 **[ТС]**

не хочет

Сообщение от Para bellum

PHPВыделить код

$sql = 'INSERT INTO `'.$this->options['db_table']
* * * * * * * * .'` (`name`, `size`, `type`, `title`, `description`)'
* * * * * * * * .' VALUES (?, ?, ?, ?, ?, NOW())';

@_Erik_ · 20.09.2016, 20:58 **[ТС]**

$sql = 'INSERT INTO `'.$this->options['db_table']
.'` (`name`, `size`, `type`, `title`, `description`, `date`)'
.' VALUES (?, ?, ?, ?, ?, NOW())';

вот так удалось ох и глупый я))) вы же сказалидобавить) я добавил давно но вот , `date` не собразил

Добавлено через 5 часов 11 минут
Продолжаем мучится
в UploadHandler.php есть строчки отвечающие за путь

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
public function __construct($options = null, $initialize = true, $error_messages = null) {
        $this->response = array();
        $this->options = array(
            'script_url' => $this->get_full_url().'/'.$this->basename($this->get_server_var('SCRIPT_NAME')),
            'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/files/',
            'upload_url' => $this->get_full_url().'/files/',

Мне нужно что бы каждый раз когда я загружаю фото на сайт создавалось папка по времени. Ну у меня получилось но не правильно так как кнопки удалить не работают а они важны...

неправильный код

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
7
8
    $folder = date("d-m-Y H-i-s"); // присваиваем переменно сег. дату
    $up = '/image/'.$folder.'/';
    //$title = '/4ddddd/';
        $this->response = array();
        $this->options = array(
            'script_url' => $this->get_full_url().'/'.$this->basename($this->get_server_var('SCRIPT_NAME')),
            'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).$up,
            'upload_url' => $this->get_full_url().$up,

что получается папка создается и заливаются туда файлы но кнопки то не работают. Гуглю 3 часа. нашел вроде как бы решениеhttp://stackoverflow.com/quest... ile-upload

PHP
1
2
3
4
5
6
7
You can do it in two ways: 1.. by changing the line 40 in server / php / UploadHandler.php and put the directory you want
 
 'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/files/',
2.. by adding the upload dir as parameter when initializing the class
 
$options = array ('upload_dir' => dirname(__FILE__) . '/uploaddir/');
$upload_handler = new UploadHandler($options);

а как примаштырить не получается пробовал два часа еще гуглить

полный исходный код

Добавлено через 3 минуты
http://rapid.ufanet.ru/90137299

Добавлено через 23 минуты
http://stofl-ru.com/questions/... ynamically

вот подобное через $_SESSION но что это с чем едят не понятно мне... буду гуглить.

@Para bellum · 20.09.2016, 21:01

Сообщение от _Erik_

кнопки удалить не работают

В смысле? Какие ошибки?

@_Erik_ · 20.09.2016, 21:50 **[ТС]**

Сообщение от Para bellum

кнопки удалить не работают
В смысле? Какие ошибки?

Когда я заносил в переменную дату папка создавалось загружались файлы но при нажатии удалить время же меняется то есть было 16:15 а при нажатии удалить становилось 16:16 поэтому файлы из папки не удалялись так же и в mysql строки не удалялись.

Выгружу то что получается

Добавлено через 2 минуты
http://rapid.ufanet.ru/54519113

Добавлено через 4 минуты
SQL

Кликните здесь для просмотра всего текста

SQL
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
-- phpMyAdmin SQL Dump
-- version 4.4.15.5
-- [url]http://www.phpmyadmin.net[/url]
--
-- Хост: 127.0.0.1:3306
-- Время создания: Сен 20 2016 г., 21:07
-- Версия сервера: 5.5.48
-- Версия PHP: 5.3.29
 
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
 
--
-- База данных: `example`
--
 
-- --------------------------------------------------------
 
--
-- Структура таблицы `files`
--
 
CREATE TABLE IF NOT EXISTS `files` (
  `id` INT(11) UNSIGNED NOT NULL,
  `name` VARCHAR(255) DEFAULT NULL,
  `size` INT(11) DEFAULT NULL,
  `type` VARCHAR(255) DEFAULT NULL,
  `url` VARCHAR(255) DEFAULT NULL,
  `title` VARCHAR(255) DEFAULT NULL,
  `description` text
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
 
--
-- Дамп данных таблицы `files`
--
 
INSERT INTO `files` (`id`, `name`, `size`, `type`, `url`, `title`, `description`) VALUES
(6, 'Chrysanthemum.jpg', 879394, 'image/jpeg', NULL, '', ''),
(9, 'Tulips.jpg', 620888, 'image/jpeg', NULL, '', ''),
(10, 'Koala.jpg', 780831, 'image/jpeg', NULL, '', '');
 
--
-- Индексы сохранённых таблиц
--
 
--
-- Индексы таблицы `files`
--
ALTER TABLE `files`
  ADD PRIMARY KEY (`id`);
 
--
-- AUTO_INCREMENT для сохранённых таблиц
--
 
--
-- AUTO_INCREMENT для таблицы `files`
--
ALTER TABLE `files`
  MODIFY `id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=11;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Добавлено через 38 минут
$folder = date("d-m-Y H-i-s"); если удалить секунды работает ровно минуту ... как сделать так что бы в пременной была и оставалась время... js какой то что ли передавать не пойму даже

@Para bellum · 21.09.2016, 06:50

Во-первых, зачем давать папке имя с текущей датой, если она для одного пользователя предназначена? Во-вторых, если даже и создаёте -- просто заносите куда-нибудь название.

Сообщение от _Erik_

так же и в mysql строки не удалялись.

Включите вывод ошибок и смотрите в консоли обозревателя, если через AJAX всё работает. Или просто отчёты (log) смотрите на сервере.

@_Erik_ · 21.09.2016, 09:15 **[ТС]**

Сообщение от Para bellum

Во-первых, зачем давать папке имя с текущей датой, если она для одного пользователя предназначена

просто удобно знать кто когда загрузил чтобы скачивать было удобно.э

Сообщение от Para bellum

Во-вторых, если даже и создаёте -- просто заносите куда-нибудь название.

Куда?

@Para bellum · 21.09.2016, 09:39

Сообщение от _Erik_

просто удобно знать кто когда загрузил чтобы скачивать было удобно

Папки для разных пользователей разные? А-то что будет, если два пользователя в одну секунду создадут папку?

Сообщение от _Erik_

Куда?

В базу, хотя бы. Или в сессию, если папка одноразовая и удалится по прошествии времени.

@_Erik_ · 23.09.2016, 13:58 **[ТС]**

Сообщение от Para bellum

Папки для разных пользователей разные? А-то что будет, если два пользователя в одну секунду создадут папку?

А база на что мне?) в этом случае база не страшна решил вопрос так) просто нафиг убрал минуты секунды часы.

@_Erik_ · 27.09.2016, 18:57 **[ТС]**

добавил еще одно поле не могу найти ошибку почему не работает

PHP
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
<?php
 
$options = array(
    'delete_type' => 'POST',
    'db_host' => 'localhost',
    'db_user' => 'root',
    'db_pass' => '',
    'db_name' => 'uplod',
    'db_table' => 'files'
);
 
error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
 
class CustomUploadHandler extends UploadHandler {
 
    protected function initialize() {
        $this->db = new mysqli(
                $this->options['db_host'], $this->options['db_user'], $this->options['db_pass'], $this->options['db_name']
        );
        parent::initialize();
        $this->db->close();
    }
 
    protected function handle_form_data($file, $index) {
        $file->title = @$_REQUEST['title'][$index];
        $file->description = @$_REQUEST['description'][$index];
        $file->email = @$_REQUEST['email'][$index];
        $file->telefon = @$_REQUEST['telefon'][$index];
    }
 
    protected function handle_file_upload($uploaded_file, $name, $size, $type, $error, $index = null, $content_range = null) {
        $file = parent::handle_file_upload(
                        $uploaded_file, $name, $size, $type, $error, $index, $content_range
        );
        if (empty($file->error)) {
            $sql = 'INSERT INTO `' . $this->options['db_table']
                    . '` (`name`, `date`, `size`, `type`, `title`, `description`, `email`, `telefon`)'
                    . ' VALUES (?, ?, ?, ?, ?, ?, ?, ?, NOW())';
            $query = $this->db->prepare($sql);
            $query->bind_param(
                    'sisss', $file->name, $file->size, $file->type, $file->title, $file->email, $file->telefon
            );
            $query->execute();
            $file->id = $this->db->insert_id;
        }
        return $file;
    }
 
    protected function set_additional_file_properties($file) {
        parent::set_additional_file_properties($file);
        if ($_SERVER['REQUEST_METHOD'] === 'GET') {
            $sql = 'SELECT `id`, `type`, `title`, `description`, `email`, `telefon` FROM `'
                    . $this->options['db_table'] . '` WHERE `name`=?';
            $query = $this->db->prepare($sql);
            $query->bind_param('s', $file->name);
            $query->execute();
            $query->bind_result(
                    $id, $type, $title, $description, $email, $telefon
            );
            while ($query->fetch()) {
                $file->id = $id;
                $file->type = $type;
                $file->title = $title;
                $file->description = $description;
                $file->email = $email;
                $file->telefon = $telefon;
            }
        }
    }
 
    public function delete($print_response = true) {
        $response = parent::delete(false);
        foreach ($response as $name => $deleted) {
            if ($deleted) {
                $sql = 'DELETE FROM `'
                        . $this->options['db_table'] . '` WHERE `name`=?';
                $query = $this->db->prepare($sql);
                $query->bind_param('s', $name);
                $query->execute();
            }
        }
        return $this->generate_response($response, $print_response);
    }
 
}
 
$upload_handler = new CustomUploadHandler($options);

@_Erik_ · 27.09.2016, 18:58 **[ТС]**

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
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE HTML>
<!--
/*
 * jQuery File Upload Plugin AngularJS Demo
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2013, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
-->
<html lang="en">
    <head>
        <!-- Force latest IE rendering engine or ChromeFrame if installed -->
        <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <![endif]-->
        <meta charset="utf-8">
        <title>jQuery File Upload Demo - AngularJS version</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap styles -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <!-- Generic page styles -->
        <link rel="stylesheet" href="css/style.css">
        <!-- blueimp Gallery styles -->
        <link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
        <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
        <link rel="stylesheet" href="css/jquery.fileupload.css">
        <link rel="stylesheet" href="css/jquery.fileupload-ui.css">
        <!-- CSS adjustments for browsers with JavaScript disabled -->
        <noscript><link rel="stylesheet" href="css/jquery.fileupload-noscript.css"></noscript>
        <noscript><link rel="stylesheet" href="css/jquery.fileupload-ui-noscript.css"></noscript>
        <style>
            /* Hide Angular JS elements before initializing */
            .ng-cloak {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-fixed-top .navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="https://github.com/blueimp/jQuery-File-Upload/tags">Download</a></li>
                        <li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
                        <li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
                        <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <h1>jQuery File Upload Demo</h1>
            <h2 class="lead">AngularJS version</h2>
            <ul class="nav nav-tabs">
                <li><a href="basic.html">Basic</a></li>
                <li><a href="basic-plus.html">Basic Plus</a></li>
                <li><a href="index.html">Basic Plus UI</a></li>
                <li class="active"><a href="angularjs.html">AngularJS</a></li>
                <li><a href="jquery-ui.html">jQuery UI</a></li>
            </ul>
            <br>
            <blockquote>
                <p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for AngularJS.<br>
                    Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
                    Works with fffffffffffffffany server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
            </blockquote>
 
            <br>
            <!-- The file upload form used as target for the file upload widget -->
            <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
                <!-- Redirect browsers with JavaScript disabled to the origin page -->
                <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
                <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                <div class="row fileupload-buttonbar">
                    <div class="col-lg-7">
                        <table class="table table-striped files ng-cloak">
                            <tr 
                                data-ng-class="{'processing': file.$processing()}">
                            <label class="description">
                                <span>Description:</span><br>
                                <input name="description[]" class="form-control">
                                <input name="email[]" class="form-control">
                                <input name="telefon[]" class="form-control">
                            </label>
                            </tr>
                        </table>
                        <!-- The fileinput-button span is used to style the file input field as button -->
                        <span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
                            <i class="glyphicon glyphicon-plus"></i>
                            <span>Add files...</span>
                            <input type="file" name="files[]" multiple ng-disabled="disabled">
                        </span>
                        <button type="button" class="btn btn-primary start" data-ng-click="submit()">
                            <i class="glyphicon glyphicon-upload"></i>
                            <span>Start upload</span>
                        </button>
                        <button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
                            <i class="glyphicon glyphicon-ban-circle"></i>
                            <span>Cancel upload</span>
                        </button>
                        <!-- The global file processing state -->
                        <span class="fileupload-process"></span>
                    </div>
                    <!-- The global progress state -->
                    <div class="col-lg-5 fade" data-ng-class="{in: active()}">
                        <!-- The global progress bar -->
                        <div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
                        <!-- The extended global progress state -->
                        <div class="progress-extended">&nbsp;</div>
                    </div>
                </div>
                <!-- The table listing the files available for upload/download -->
 
                <table class="table table-striped files ng-cloak">
                    <tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
                        <td data-ng-switch data-on="!!file.thumbnailUrl">
                            <div class="preview" data-ng-switch-when="true">
                                <a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
                            </div>
                            <div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
                        </td>
                        <td>
                            <p class="name" data-ng-switch data-on="!!file.url">
                                <span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
                                    <a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
                                    <a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
                                </span>
                                <span data-ng-switch-default>{{file.name}}</span>
                                
                                <label class="title">
                                    <span>Title:</span><br>
                                    <input name="title[]" class="form-control">
                                </label>
                            </p>
                            <strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
                        </td>
                        <td>
                            <p class="size">{{file.size| formatFileSize}}</p>
                            <div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
                        </td>
                        <td>
                            <button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
                                <i class="glyphicon glyphicon-upload"></i>
                                <span>Start</span>
                            </button>
                            <button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancel</span>
                            </button>
                            <button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
                                <i class="glyphicon glyphicon-trash"></i>
                                <span>Delete</span>
                            </button>
                        </td>
                    </tr>
                </table>
            </form>
            <br>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Demo Notes</h3>
                </div>
                <div class="panel-body">
                    <ul>
                        <li>The maximum file size for uploads in this demo is <strong>999 KB</strong> (default file size is unlimited).</li>
                        <li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
                        <li>Uploaded files will be deleted automatically after <strong>5 minutes or less</strong> (demo files are stored in memory).</li>
                        <li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
                        <li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
                        <li>Built with the <a href="http://getbootstrap.com/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- The blueimp Gallery widget -->
        <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
            <div class="slides"></div>
            <h3 class="title"></h3>
            <a class="prev">‹</a>
            <a class="next">›</a>
            <a class="close">×</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
        <script src="js/vendor/jquery.ui.widget.js"></script>
        <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
        <script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
        <!-- The Canvas to Blob plugin is included for image resizing functionality -->
        <script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
        <!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <!-- blueimp Gallery script -->
        <script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
        <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
        <script src="js/jquery.iframe-transport.js"></script>
        <!-- The basic File Upload plugin -->
        <script src="js/jquery.fileupload.js"></script>
        <!-- The File Upload processing plugin -->
        <script src="js/jquery.fileupload-process.js"></script>
        <!-- The File Upload image preview & resize plugin -->
        <script src="js/jquery.fileupload-image.js"></script>
        <!-- The File Upload audio preview plugin -->
        <script src="js/jquery.fileupload-audio.js"></script>
        <!-- The File Upload video preview plugin -->
        <script src="js/jquery.fileupload-video.js"></script>
        <!-- The File Upload validation plugin -->
        <script src="js/jquery.fileupload-validate.js"></script>
        <!-- The File Upload Angular JS module -->
        <script src="js/jquery.fileupload-angular.js"></script>
        <!-- The main application script -->
        <script src="js/app.js"></script>
    </body>
</html>

@_Erik_ · 27.09.2016, 19:02 **[ТС]**

так выглядит база данных.
id name date size type url title description email telefon

SQL
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
-- phpMyAdmin SQL Dump
-- version 4.4.15.7
-- [url]http://www.phpmyadmin.net[/url]
--
-- Хост: 127.0.0.1:3306
-- Время создания: Сен 27 2016 г., 19:01
-- Версия сервера: 5.6.31
-- Версия PHP: 5.6.23
 
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
 
--
-- База данных: `uplod`
--
 
-- --------------------------------------------------------
 
--
-- Структура таблицы `files`
--
 
CREATE TABLE IF NOT EXISTS `files` (
  `id` INT(11) UNSIGNED NOT NULL,
  `name` VARCHAR(255) DEFAULT NULL,
  `date` datetime NOT NULL,
  `size` INT(11) DEFAULT NULL,
  `type` VARCHAR(255) DEFAULT NULL,
  `url` VARCHAR(255) DEFAULT NULL,
  `title` VARCHAR(255) DEFAULT NULL,
  `description` text,
  `email` text,
  `telefon` text
) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8;
 
--
-- Дамп данных таблицы `files`
--
 
INSERT INTO `files` (`id`, `name`, `date`, `size`, `type`, `url`, `title`, `description`, `email`, `telefon`) VALUES
(15, 'test', '2016-09-27 20:42:20', 52, 'png', NULL, 'titletest', 'descriptiontest', 'emailtest', 'telefontest');
 
--
-- Индексы сохранённых таблиц
--
 
--
-- Индексы таблицы `files`
--
ALTER TABLE `files`
  ADD PRIMARY KEY (`id`);
 
--
-- AUTO_INCREMENT для сохранённых таблиц
--
 
--
-- AUTO_INCREMENT для таблицы `files`
--
ALTER TABLE `files`
  MODIFY `id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=23;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

@Para bellum · 27.09.2016, 19:03

Что это?

PHP
1
2
3
$sql = 'INSERT INTO `' . $this->options['db_table']
                    . '` (`name`, `date`, `size`, `type`, `title`, `description`, `email`, `telefon`)'
                    . ' VALUES (?, ?, ?, ?, ?, ?, ?, ?, NOW())';

Почему в перечислении дата идёт вторым параметром, а в значениях NOW() в конце?
И текст ошибки скажите.

@_Erik_ · 27.09.2016, 19:12 **[ТС]**

Добавил еще одно поле не могу найти ошибку почему не работает. Файл загружается, а вот в базу не добавляется где то в sql ошибка?

Добавлено через 2 минуты

Сообщение от Para bellum

Почему в перечислении дата идёт вторым параметром, а в значениях NOW() в конце?
И текст ошибки скажите.

да нету текста ошибки. вот в что м то дело... даже не знаю поля заносится или нет(
$file->email = @$_REQUEST['email'][$index];
$file->telefon = @$_REQUEST['telefon'][$index];
да я переделывал но все равно now()

Добавлено через 3 минуты

PHP
1
2
3
            $sql = 'INSERT INTO `' . $this->options['db_table']
                    . '` (`name`, `date`, `size`, `type`, `title`, `description`, `email`, `telefon`)'
                    . ' VALUES (?, NOW(), ?, ?, ?, ?, ?, ?, ?)';

переписал исправил не не хочет

Добавлено через 2 минуты
щас кину архив если не трудно поглядите пожалуйста

@Para bellum · 27.09.2016, 19:14

Ну напишите

PHP
1
2
if(!$query->execute()) 
    die($this->db->error);

И отобразится ошибка, если есть.

@_Erik_ · 27.09.2016, 19:14 **[ТС]**

http://rapid.ufanet.ru/44804522

SQL
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
-- phpMyAdmin SQL Dump
-- version 4.4.15.7
-- [url]http://www.phpmyadmin.net[/url]
--
-- Хост: 127.0.0.1:3306
-- Время создания: Сен 27 2016 г., 19:01
-- Версия сервера: 5.6.31
-- Версия PHP: 5.6.23
 
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
 
--
-- База данных: `uplod`
--
 
-- --------------------------------------------------------
 
--
-- Структура таблицы `files`
--
 
CREATE TABLE IF NOT EXISTS `files` (
  `id` INT(11) UNSIGNED NOT NULL,
  `name` VARCHAR(255) DEFAULT NULL,
  `date` datetime NOT NULL,
  `size` INT(11) DEFAULT NULL,
  `type` VARCHAR(255) DEFAULT NULL,
  `url` VARCHAR(255) DEFAULT NULL,
  `title` VARCHAR(255) DEFAULT NULL,
  `description` text,
  `email` text,
  `telefon` text
) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8;
 
--
-- Дамп данных таблицы `files`
--
 
INSERT INTO `files` (`id`, `name`, `date`, `size`, `type`, `url`, `title`, `description`, `email`, `telefon`) VALUES
(15, 'test', '2016-09-27 20:42:20', 52, 'png', NULL, 'titletest', 'descriptiontest', 'emailtest', 'telefontest');
 
--
-- Индексы сохранённых таблиц
--
 
--
-- Индексы таблицы `files`
--
ALTER TABLE `files`
  ADD PRIMARY KEY (`id`);
 
--
-- AUTO_INCREMENT для сохранённых таблиц
--
 
--
-- AUTO_INCREMENT для таблицы `files`
--
ALTER TABLE `files`
  MODIFY `id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=23;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

Blueimp/jQuery-File-Upload интеграция с mysql по документацией

Решение