Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 23.03.2019
Сообщений: 11
1

Ajax массовая загрузка изображений на сервер с превью

25.03.2019, 00:31. Показов 1241. Ответов 7
Метки нет (Все метки)

Умные люди помогите, есть форма отправки изображений но не работает, что нужно изменить в php что бы сохранялись в папку




HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form action="uploadImages.php" method="post" enctype="multipart/form-data" id="uploadImages">
 
    <input type="file" id="addImages" multiple="">
 
    <input type="hidden" name="azaza" value="zazaza">
 
    <ul id="uploadImagesList">
        <li class="item template">
            <span class="img-wrap">
                <img src="image.jpg" alt="">
            </span>
            <span class="delete-link" title="Удалить">Удалить</span>
        </li>
    </ul>
 
    <div class="clear"></div>
 
    <div>
        <input type="submit" value="Отправить">
    </div>
 
</form>


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
<script>
 jQuery(document).ready(function ($) {
 
     var maxFileSize = 2 * 1024 * 1024; // (байт) Максимальный размер файла (2мб)
     var queue = {};
     var form = $('form#uploadImages');
     var imagesList = $('#uploadImagesList');
 
     var itemPreviewTemplate = imagesList.find('.item.template').clone();
     itemPreviewTemplate.removeClass('template');
     imagesList.find('.item.template').remove();
 
 
     $('#addImages').on('change', function () {
         var files = this.files;
 
         for (var i = 0; i < files.length; i++) {
             var file = files[i];
 
             if ( !file.type.match(/image\/(jpeg|jpg|png|gif)/) ) {
                 alert( 'Фотография должна быть в формате jpg, png или gif' );
                 continue;
             }
 
             if ( file.size > maxFileSize ) {
                 alert( 'Размер фотографии не должен превышать 2 Мб' );
                 continue;
             }
 
             preview(files[i]);
         }
 
         this.value = '';
     });
 
     // Создание превью
     function preview(file) {
         var reader = new FileReader();
         reader.addEventListener('load', function(event) {
             var img = document.createElement('img');
 
             var itemPreview = itemPreviewTemplate.clone();
 
             itemPreview.find('.img-wrap img').attr('src', event.target.result);
             itemPreview.data('id', file.name);
 
             imagesList.append(itemPreview);
 
             queue[file.name] = file;
 
         });
         reader.readAsDataURL(file);
     }
 
     // Удаление фотографий
     imagesList.on('click', '.delete-link', function () {
         var item = $(this).closest('.item'),
             id = item.data('id');
 
         delete queue[id];
 
         item.remove();
     });
 
 
     // Отправка формы
     form.on('submit', function(event) {
 
         var formData = new FormData(this);
 
         for (var id in queue) {
             formData.append('images[]', queue[id]);
         }
 
         $.ajax({
             url: $(this).attr('action'),
             type: 'POST',
             data: formData,
             async: true,
             success: function (res) {
                 alert(res)
             },
             cache: false,
             contentType: false,
             processData: false
         });
 
         return false;
     });
 
 });
 
</script>

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
<?php 
if ((!empty($_POST))&&(isset($_SERVER['HTTP_X_REQUESTED_WITH']))&&($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));
header('Content-Type: application/json; charset=utf-8');
$response = array();
$response['status'] = 'bad';
if (!empty($_FILES['file']['tmp_name'])){
    for($key=0;$key<count($_FILES['file']['tmp_name']);$key++){
        $upload_path = __DIR__ . "/upload/";
        $user_filename = $_FILES['file']['name'][$key];
        $userfile_basename = pathinfo($user_filename,PATHINFO_FILENAME );
        $userfile_extension = pathinfo($user_filename, PATHINFO_EXTENSION);
        $server_filename = $userfile_basename . "." . $userfile_extension;
        $server_filepath = $upload_path . $server_filename;
        $i = 0;
        while(file_exists($server_filepath)){
            $i++;
            $server_filepath = $upload_path .  $userfile_basename . "($i)." . $userfile_extension;
        }
        if (copy($_FILES['file']['tmp_name'][$key], $server_filepath)){
            $response['files'][] =  $server_filepath;
            $response['status'] = 'ok';
        }
    }
}
echo json_encode($response);
?>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.03.2019, 00:31
Ответы с готовыми решениями:

Загрузка изображений с превью и последующей загрузкой на сервер
Добрый день! Понадобилось соорудить именно такую функцию: есть форма с данными (имя, город,...

Слишком долгая ajax загрузка изображений на сервер
Делал загрузку картинок через объект FileReader, после чего передавал его методом post в формате...

Массовая загрузка изображений и их обработка
Ребят выручайте, наворотил каши что теперь и разобраться не могу :cry: На странице есть форма с...

Массовая загрузка изображений на хостинг и занесение в БД
Доброго времени суток имеется скрипт массовая загрузка изоброжений всё работает отлично.....есть...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
Обучение в Java Mentor с оплатой после трудоустройства
7
887 / 722 / 447
Регистрация: 13.07.2015
Сообщений: 2,250
25.03.2019, 10:23 2
попробуй вместо copy использовать https://www.php.net/manual/ru/... d-file.php
0
0 / 0 / 0
Регистрация: 23.03.2019
Сообщений: 11
26.03.2019, 10:57  [ТС] 3
Данные из примера на сервер попадут в следующем виде:

https://codd-wd.ru/wp-content/... 03/ex2.jpg



как тонужно сделать что бы файлы сохранялись
0
887 / 722 / 447
Регистрация: 13.07.2015
Сообщений: 2,250
26.03.2019, 17:23 4
сейчас в чем проблема? файлы не копируются в папку upload?
0
0 / 0 / 0
Регистрация: 23.03.2019
Сообщений: 11
26.03.2019, 23:19  [ТС] 5
да, к сожалению
0
887 / 722 / 447
Регистрация: 13.07.2015
Сообщений: 2,250
27.03.2019, 07:22 6
у папки upload какие права? или сервер на windows?
0
0 / 0 / 0
Регистрация: 23.03.2019
Сообщений: 11
27.03.2019, 11:55  [ТС] 7
сервер на windows
0
887 / 722 / 447
Регистрация: 13.07.2015
Сообщений: 2,250
27.03.2019, 11:59 8
может в js проблема? сделай в php
PHP
1
2
$response['post'] = $_POST;
$response['files'] = $_FILES;
а потом посмотришь что alert(res) выдает на странице
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.03.2019, 11:59

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Массовая загрузка изображений на сайт, написанный на wordpress
нужно написать скрипт который будет загружать изображения в произвольные поля постов сайта...

Загрузчик изображений с превью на HTML5. Превью без загрузки
Здравствуйте, уважаемые! Есть острая необходимость создать на сайте возможность загружать...

Ajax загрузка изображений
Добрый день! Вопрос заключается в следующем: - Есть раздел на сайте (допустим статьи) и при...

Загрузка изображений посредством ajax
Загружаю изображения путем ajax В php скрипте принимаю $image_info = getimagesize($_FILES); Все...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.