Зарузка картинки без перезагрузки и ее отображение

@Nebiros · Регистрация: 23.03.2010

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

Как загрузить картинку и тут же ее показать ( к примеру в блоке выше или ниже ), все это без перезагрузки страницы. В интернете много результатов нарыл и все они ведут к одному практически методу...

HTML5
1
2
3
4
5
6
<form enctype="multipart/form-data" action="uploader.php" method="post" name="loadavatar" target="hiddenframe">
<input type="hidden" name="MAX_FILE_SIZE" value="64000" />
<input id="avatarfile" name="avatarfile" type="file" />
<input type="submit" value="upload" />
</form>
<iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px"></iframe>

PHP
1
2
3
4
5
6
7
8
9
10
11
$uploaddir = 'img/';
$uploadfile = $uploaddir . basename($_FILES['avatarfile']['name']);
echo '<pre>';
if (move_uploaded_file($_FILES['avatarfile']['tmp_name'], $uploadfile)) {
    echo "Файл корректен и был успешно загружен.\n";
} else {
    echo "Возможная атака с помощью файловой загрузки!\n";
}
echo 'Некоторая отладочная информация:';
print_r($_FILES);
print "</pre>";

но во первых страница перезагружается а во вторых на сервер ничего не загружается, путь указан правильно пробовал обычным методом. подскажите как правильно сделать данное решение?

@ntlinuxnt · 12.12.2016, 02:55

тык плохо смотрели.

@Nebiros · 12.12.2016, 12:58 **[ТС]**

тык плохо смотрели.
картинка отображается то сразу но куда она загружается на сервер?

@Пифагор · 12.12.2016, 13:27

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

но куда она загружается на сервер?

Никуда. Эта функция служит только для отображения оной.
Загрузить ее можно с помощью AJAX.

@Nebiros · 12.12.2016, 13:29 **[ТС]**

Сообщение от Пифагор

Никуда. Эта функция служит только для отображения оной.
Загрузить ее можно с помощью AJAX.

а можете подсказать какой функцией и как, по сути получается так - человек пишет статью и загружается к ней фото ( ну и чтобы их было сразу видно) по завершению жмет готово и статья со всеми фото сохраняется, как я понимаю фото уже должны быть сохранены на сервере...

@Пифагор · 12.12.2016, 13:48

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

а можете подсказать какой функцией и как

Если бы ни предпросмотр изображения, то это все делается за 20 минут на PHP (или любом серверном языке).
В данном случае не все так просто.
Из JS-файла отсылается запрос на файл *.php, например. Скрипт в файле делает, что должен и присылает ответ обратно в JS-файл.
Почитайте про AJAX и все станет понятно.

Добавлено через 10 минут
Хотя... Просто вставьте этот код в html в элемент <script></script> и все будет норм.
Вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
 
                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(150)
                        .height(200);
                };
 
                reader.readAsDataURL(input.files[0]);
            }
        }

HTML5
1
2
3
4
5
6
<form enctype="multipart/form-data" action="uploader.php" method="post" name="loadavatar" target="hiddenframe">
<input type="hidden" name="MAX_FILE_SIZE" value="64000" />
<input id="avatarfile" name="avatarfile" type="file" />
<input type="submit" value="upload" />
</form>
<iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px"></iframe>

ну и, разумеется, изменить значение id, в котором будет отображаться картинка.

Добавлено через 1 минуту
И не забудьте подключить jQuery.

@j2FunOnly · 12.12.2016, 14:56

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

Как загрузить картинку и тут же ее показать ( к примеру в блоке выше или ниже ), все это без перезагрузки страницы.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Async image uploader</title>
  </head>
  <body>
    <form id="uploader">
      <input id="avatarfile" name="avatarfile" type="file">
      <input type="submit" value="upload">
    </form>
    <div class="uploaded-images"></div>
    <script src="uploader.js" charset="utf-8"></script>
  </body>
</html>

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
var form = document.querySelector('#uploader');
var uploaderBtn = form.querySelector('input[type="submit"]');
var fileSelect = form.querySelector('#avatarfile');
var uploadedImages = document.querySelector('.uploaded-images');
 
form.onsubmit = function (e) {
  e.preventDefault();
 
  var file = fileSelect.files[0];
  var formData = new FormData();
  formData.append('avatarfile', file, file.name);
 
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'uploader.php', true);
  xhr.onreadystatechange = function () {
    if(xhr.readyState != 4) return;
 
    uploaderBtn.disabled = false;
    uploaderBtn.value = "Upload";
 
    if(xhr.status == 201) {
      var img = document.createElement('img');
      img.src = JSON.parse(xhr.responseText).image.url;
      uploadedImages.appendChild(img);
    } else {
      alert('Something wrong... ' + xhr.status + ': ' + xhr.statusText);
    }
  }
  xhr.send(formData);
 
  uploaderBtn.value = "Uploading...";
  uploaderBtn.disabled = true;
}

PHP
1
2
3
4
5
6
7
8
9
10
<?php
$uploaddir = 'img/';
$uploadfile = $uploaddir . basename($_FILES['avatarfile']['name']);
if (move_uploaded_file($_FILES['avatarfile']['tmp_name'], $uploadfile)) {
    header($_SERVER['SERVER_PROTOCOL'] . ' 201 File Uploaded', true, 201);
    echo json_encode(['image' => ['url' => $uploadfile]]);
} else {
    header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error');
    echo 'Internal Server Error';
}

@Nebiros · 12.12.2016, 16:32 **[ТС]**

из всего показанного объединил и получился такой вот скрипт

PHP/HTML
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
.............
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/ajaxupload.3.5.js"></script>
<script type="text/javascript" >
    $(function(){
        var btnUpload=$('#upload');
        var status=$('#status');
        new AjaxUpload(btnUpload, {
            action: 'upload-file.php',
            name: 'uploadfile',
            onSubmit: function(file, ext){
                 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
                    status.text('Поддерживаемые форматы JPG, PNG или GIF');
                    return false;
                }
                status.text('Загрузка...');
            },
            onComplete: function(file, response){
                //On completion clear the status
                status.text('');
                //Add uploaded file to list
                if(response==="success"){
                    $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
                } else{
                    $('<li></li>').appendTo('#files').text('Файл не загружен' + file).addClass('error');
                }
            }
        });
        
    });
</script>
</head>
<body>
<div id="mainbody" >
        <h3>&raquo; AJAX File Upload Form Using jQuery</h3>
        <!-- Upload Button, use any id you wish-->
        <div id="upload" ><span>Выбрать файл<span></div><span id="status" ></span>
        
        <ul id="files" ></ul>
</div>
.........

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$uploaddir = 'img/'; 
$file = $uploaddir . basename($_FILES['uploadfile']['name']); 
 
$ext = substr($_FILES['uploadfile']['name'],strpos($_FILES['uploadfile']['name'],'.'),strlen($_FILES['uploadfile']['name'])-1); 
$filetypes = array('.jpg','.gif','.bmp','.png','.JPG','.BMP','.GIF','.PNG','.jpeg','.JPEG');
 
if(!in_array($ext,$filetypes)){
    echo "<p>Данный формат файлов не поддерживается</p>";}
else{ 
    if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) { 
      echo "success"; 
    } else {
        echo "error";
    }
}

все работает отлично и как нужно, за исключением одного большого минуса - если я нахожусь на главной странице то все работает а если нахожусь на любой другой ( к примеру localhost работает а localhost/test/ уже не работает) то не работает, причем скрипт находится в одном и том же месте. Подскажите что нужно подправить чтобы правильно работало на всех страницах ?

@Balanaar · 12.12.2016, 16:40

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

JavaScript
1
action: 'upload-file.php',

замените на

JavaScript
1
action: '/upload-file.php',

Файл upload-file.php должен находиться в корне сайта

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	12.12.2016, 02:55
	тык плохо смотрели. 0

@Nebiros 41 / 40 / 16 Регистрация: 23.03.2010 Сообщений: 3,122
	12.12.2016, 12:58 [ТС]
	тык плохо смотрели. картинка отображается то сразу но куда она загружается на сервер? 0