Форум программистов, компьютерный форум, киберфорум
PHP для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
10 / 8 / 8
Регистрация: 08.05.2013
Сообщений: 136
1

Загрузка файла сразу после выбора

16.06.2018, 18:25. Просмотров 625. Ответов 2
Метки нет (Все метки)

Доброго времени суток. Хочу сделать замену изображения, хотелось бы загружать и работать с ним сразу после выбора, не нажимая на кнопку submit. Пытался сделать так:

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
if(isset($data["updateImage"])){
    var_dump($_FILES);//выдает пустой массив, т.е. файл не выбран
    $fileName = $_FILES["updateImage"]["name"];//ошибка
    $fileTmp = $_FILES["updateImage"]["tmp_name"];//ошибка                    
    move_uploaded_file($fileTmp, "img/".$fileName);
                        
    $query = "UPDATE news SET picture='img/".$fileName."' WHERE id=".$data["currentNews"];
    $connection->query($query) or die($connection->error);
    $section = 2;
}
 
...
 
foreach($news as $new){
    echo "<div>";
    echo "<img src=\"".$new["picture"]."\" alt=\"\" >";
    echo "<form id=\"chngImg\" method=\"POST\" action=\"cabinet.php\">";
    echo    "<div class=\"delete\"><input type=\"image\" name=\"delete\" src=\"img/deleteBtnNotActive.png\" onmouseover=\"hover(this);\" onmouseout=\"unhover(this);\"></div>";
    //такой способ нашел на просторах интернета, страница перезагружается и выплывает ошибка
    echo    "<input type=\"file\" class=\"updateImg\" id=\"".$new["id"]."\" name=\"updateImage\" onchange=\"document.getElementById('chngImg').submit()\" value=\"Изменить изображение\">";
    echo    "<label class=\"updLabel\" for=\"".$new["id"]."\">Сменить изображение</label>";
    echo    "<input type=\"hidden\" name=\"currentNews\" value=\"".$new["id"]."\">";
    echo "</form>";
    echo "</div>";
}
Инпут file в стилях скрываю, пользуюсь label для своего отображения выбора файла. Как мне быть? На этой странице есть форма загрузки иного типа фалов, но там с кнопкой submit и все работает, но тут хотелось бы сразу и без лишнего клика.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
16.06.2018, 18:25
Ответы с готовыми решениями:

Загрузка нескольких фото сразу
&lt;?php $data = $_POST; if (isset($data)) print_r($_FILES); ?&gt; &lt;form name=&quot;add_ad&quot;...

Загрузка выбора города
Всем доброго времени суток! Хочу реализовать выбор города , но не знаю как это сделать. Суть...

Загрузка файла сразу после выбора
Как сделать загрузку файла сразу после выбора ? Это обычная стандартная форма загрузки, сначало...

Отправка файла на сервер сразу после его выбора в input file
Добрый день уважаемые программисты , есть инпут, как мне отправить картинку после открытия его в ...

2
Эксперт PHP
3531 / 2965 / 1245
Регистрация: 01.08.2012
Сообщений: 10,199
17.06.2018, 11:08 2
https://github.com/mailru/FileAPI
0
10 / 8 / 8
Регистрация: 08.05.2013
Сообщений: 136
17.06.2018, 16:59  [ТС] 3
Вобщем сделал следующим образом:

В head:
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
<script>
            function fff(id) {
                var file = document.getElementById(id).files[0];
             
                var fd = new FormData();
                fd.append("afile", file);
                fd.append("id", id);
                // These extra params aren't necessary but show that you can include other data.
                //fd.append("username", "Groucho");
                // fd.append("accountnum", 123456);
 
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'hz.php', true);
 
                xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded / e.total) * 100;
                        console.log(percentComplete + '% uploaded');
                    }
                };
 
                xhr.onload = function() {
                    if (this.status == 200) {
                        var resp = JSON.parse(this.response);
 
                        console.log('Server got:', resp);
                        var uploadImg = document.getElementById("img"+id);
                        uploadImg.src = resp;
                    };
                };
 
                xhr.send(fd);
            }
        </script>

hz.php:
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
require_once "connectToDB.php";
$id = $_REQUEST['id'];
 
$fileName = $_FILES['afile']['name'];
$fileType = $_FILES['afile']['type'];
$fileContent = file_get_contents($_FILES['afile']['tmp_name']);
$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);
 
    $fileName = $_FILES["afile"]["name"];
    $fileTmp = $_FILES["afile"]["tmp_name"];                    
    move_uploaded_file($fileTmp, "img/".$fileName);
    
    $query = "UPDATE news SET picture='img/".$fileName."' WHERE id=".$id;
    $connection->query($query) or die($connection->error);
 
$json = json_encode("img/".$fileName);
echo $json;
?>
Ну и сама форма(в том же файле, что и яваскрипт выше):
PHP
1
2
3
4
5
6
7
8
9
10
11
foreach($news as $new){                         
    echo "<div>";                           
    echo "<img src=\"".$new["picture"]."\" id=\"img".$new["id"]."\" alt=\"\" >";
    echo "<form id=\"chngImg\" method=\"POST\" action=\"cabinet.php\" enctype=\"multipart/form-data\">";
    echo    "<div class=\"delete\"><input type=\"image\" name=\"delete\" src=\"img/deleteBtnActive.png\"></div>";
    echo "<input type=\"file\" class=\"updateImg\" id=\"".$new["id"]."\" name=\"updateImage\" accept=\"image/*\" onchange=\"fff(".$new["id"].")\">";
    echo    "<label class=\"updLabel\" for=\"".$new["id"]."\"></label>";
    echo    "<input type=\"hidden\" name=\"currentNews\" value=\"".$new["id"]."\">";
    echo "</form>";
    echo "</div>";
}
Как-то так. А с fileAPI запутался, не понял, что и куда. Думаю там примерно так же делается.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
17.06.2018, 16:59

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

Загрузка файла после выбора в combobox
Программа тестер с выбором тем. В 1 форме(авторизация) есть edit (ФИО) и combobox(выбор темы), мне...

После выбора варианта загрузки система виснет - Windows XP . загрузка идет тока с выбора безопасного режима
вот видио Кто знает что такое ?

Отправить файл загружаться сразу после его выбора
&lt;form action=&quot;&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt; &lt;input type=&quot;file&quot;...

File not found extension was unheeded после выбора картинки в диалоге выбора файла
MySQL DB вот код Private Sub Button2_Click(sender As Object, e As EventArgs) Handles...


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

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

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