How to preview images in the form and transfer images to the server without reloading the page. I have the code for uploading pictures to the server and to the database, but this all goes with reloading the page. I would like to make a preview of the image and then upload the images to the server without rebooting. 1) file handler $ uploaddir = 'i /';

$apend=date('YmdHis').rand(100,1000).'.jpg'; $uploadfile = "$uploaddir$apend"; $fileName = $_FILES['userfile']['name']; if(($_FILES['userfile']['type'] == 'image/gif' || $_FILES['userfile']['type'] == 'image/jpeg' || $_FILES['userfile']['type'] == 'image/png') && ($_FILES['userfile']['size'] != 0 and $_FILES['userfile']['size']<=1024000)) { if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { $c="INSERT INTO images (name) VALUES('".$uploadfile."')"; $q=$dbh->prepare($c); $q->execute(); $size = getimagesize($uploadfile); if ($size[0] < 5001 && $size[1]<5001) { echo "Файл загружен. Путь к файлу: <b>http://led.remturbo.ru/".$uploadfile."</b>"; } else { echo "Загружаемое изображение превышает допустимые нормы (ширина не более - 500; высота не более 1500)"; unlink($uploadfile); } } else { echo "Файл не загружен, вернитеcь и попробуйте еще раз"; } } else { echo "Размер файла не должен превышать 5000Кб"; }

2) form

 <html> <head> </head> <body> <form name="upload" action="load.php" method="POST" ENCTYPE="multipart/form-data"> Выберите файл для загрузки: <input type="file" name="userfile"> <input type="submit" name="upload" value="Загрузить"> </form> <? $stmt = $dbh->query('SELECT name FROM images'); while ($row = $stmt->fetch()) { ?><img style="height: 100px; width: 100px;" src="/<?= $row['name'] ?>"> <?} ?> <? if(isset($_POST['del'])) { unlink($uploadfile); } ?> </body> </html>

    1 answer 1

    Js :

     function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function(){ readURL(this); });

    HTML :

     <form id="form1" runat="server"> <input type='file' id="imgInp" /> <img id="blah" src="#" alt="your image" /> </form>

    Example (c) from

    UPD
    Ajax form submission:

     $("form#form1").submit(function(){ var formData = new FormData($(this)[0]); $.ajax({ url: 'load.php', type: 'POST', data: formData, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; });

    (c) from

    • another question how to make the page not reload after submitting the form? - Eliot
    • one
      Added to the answer - borodatych
    • last question. In ajax, alert (data) displays the entire page in a pop-up window, how to correctly output the result (picture), I tried $ ('# ajaxDiv') like this. Html (data); # ajaxDiv-div, did not work on the Internet, saw an example so that in - Eliot
    • alert(data) - response from load.php . You need at least to send a GOOD if everything is successful or BAD if the save has not passed. On the basis of the answers, take further action - at least notify the user about the result of the operation and then either request a resubmission or continue further along the chain of plans .... - borodatych