How to display previews of downloaded images via file?

Question

There is a feedback form, implemented the ability to attach multiple images. Task: by clicking on the "add" button, images were added and displayed in the preview. How to implement it? I know that through FileReader, intercepting the change action, but I don’t know how to implement it.

The form:

document.getElementById('feedback-form').addEventListener('submit', function(evt) { var http = new XMLHttpRequest(), f = this; evt.preventDefault(); http.open("POST", "contacts.php", true); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { alert(http.responseText); if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя f.messageFF.removeAttribute('value'); f.messageFF.value = ''; } } } http.onerror = function() { alert('Извините, данные не были переданы'); } http.send(new FormData(f)); }, false)

 #feedback-form { max-width: 550px; padding: 2%; border-radius: 3px; background: #f1f1f1; } #feedback-form label { float: left; display: block; clear: right; } #feedback-form .w100 { float: right; max-width: 400px; width: 97%; margin-bottom: 1em; padding: 1.5%; } #feedback-form .border { border-radius: 1px; border-width: 1px; border-style: solid; border-color: #C0C0C0 #D9D9D9 #D9D9D9; box-shadow: 0 1px 1px rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .1) inset; } #feedback-form .border:focus { outline: none; border-color: #abd9f1 #bfe3f7 #bfe3f7; } #feedback-form .border:hover { border-color: #7eb4ea #97cdea #97cdea; } #feedback-form .border:focus::-moz-placeholder { color: transparent; } #feedback-form .border:focus::-webkit-input-placeholder { color: transparent; } #feedback-form .border:not(:focus):not(:hover):valid { opacity: .8; } #submitFF { padding: 2%; border: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2) inset; background: #669acc; color: #fff; } #feedback-form br { height: 0; clear: both; } #submitFF:hover { background: #5c90c2; } #submitFF:focus { box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(0, 0, 0, .05); }

 <form enctype="multipart/form-data" method="post" id="feedback-form"> <label for="nameFF">Имя:</label> <input type="text" name="nameFF" id="nameFF" required placeholder="например, Иван Иванович Иванов" x-autocompletetype="name" class="w100 border"> <label for="contactFF">Email:</label> <input type="email" name="contactFF" id="contactFF" required placeholder="например, ivan@yandex.ru" x-autocompletetype="email" class="w100 border"> <label for="fileFF">Прикрепить файл:</label> <input type="file" name="fileFF[]" multiple id="fileFF" class="w100"> <label for="messageFF">Сообщение:</label> <textarea name="messageFF" id="messageFF" required rows="5" placeholder="Детали заявки…" class="w100 border"></textarea> <br> <input value="Отправить" type="submit" id="submitFF"> </form>

contacts.php:

 <?php if (isset ($_POST['contactFF'])) { $to = "name@yandex.ru"; // поменять на свой электронный адрес $from = $_POST['contactFF']; $subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER']; $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF']; $boundary = md5(date('r', time())); $filesize = ''; $headers = "MIME-Version: 1.0\r\n"; $headers .= "From: " . $from . "\r\n"; $headers .= "Reply-To: " . $from . "\r\n"; $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n"; $message=" Content-Type: multipart/mixed; boundary=\"$boundary\" --$boundary Content-Type: text/plain; charset=\"utf-8\" Content-Transfer-Encoding: 7bit $message"; for($i=0;$i<count($_FILES['fileFF']['name']);$i++) { if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) { $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i]))); $filename = $_FILES['fileFF']['name'][$i]; $filetype = $_FILES['fileFF']['type'][$i]; $filesize += $_FILES['fileFF']['size'][$i]; $message.=" --$boundary Content-Type: \"$filetype\"; name=\"$filename\" Content-Transfer-Encoding: base64 Content-Disposition: attachment; filename=\"$filename\" $attachment"; } } $message.=" --$boundary--"; if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ mail($to, $subject, $message, $headers); echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!'; } else { echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.'; } } ?>

@ Alexander you would close the questions you open :) - Orange_shadow

Accepted Answer · 2017-01-11T10:51:53

Version when more than one file

  function readURL(input) { if (input.files && input.files[0]) { for(i=0; i < input.files.length;i++) { var reader = new FileReader(); reader.onload = function (e) { var oImg=document.createElement("img"); oImg.setAttribute('src', e.target.result); document.getElementById("wrapper-img-form").appendChild(oImg); } reader.readAsDataURL(input.files[i]); //console.log(input.files[i]); } } } $("#imgInp").change(function(){ readURL(this); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form1" runat="server"> <input type='file' multiple id="imgInp" /> <div id="wrapper-img-form"></div> </form>

Single file version

  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); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form1" runat="server"> <input type='file' id="imgInp" /> <img id="blah" src="#" alt="your image" /> </form>

@ Alexander I added the answer when there are a lot of files.
The last question, how to wrap these previews in any block so that they can be stylized?

How to display previews of downloaded images via file?

1 answer 1

More articles: