Передать изображение в php (не через input type="file")
Всем привет. Помогите пожалуйста, реализую загрузку картинок на отзывах, сейчас все сделал как и хотел, можно добавлять массово картинки или по одной, формируются миниатюры, после того как форма отправляется необходимо и отправить изображения для обработки и загрузки уже на стороне пхп. Проблема в том что изображения формируются не в отдельных инпутах (если делать в отдельных то загружать скопом не выйдет и надо будет каждый раз жмакать конпку "добавить ещё". Сейчас просто через $_FILES можно принять либо одно либо несколько изображений (если они были выбраны через контрл), добавления нового изображения таким образом естественно затирает предыдущие. Поэтому пока вот так сделал, но не знаю как получить файл на сервере. Eсть ли вообще такая возможность, но буду рад любой подсказке.
https://jsfiddle.net/iesGhost/z9g0mwku/ Похожая реализация есть на одном сайте но не буду давать ссылку дабы не рекламировать. |
Что-то понятно, что ничего не понятно. Поле выбора
<input type="file" id="upload_file" name="upload_file[]" onchange="preview_image();" multiple/> В чем проблема выбора от одного до? Почему сервер что-то должен затереть? |
//Чтобы проверить, загружает ли пользователь какой-либо файл
if (FileUploadPath == '') Если пользователь не выберет файла и закроет диалог выбора, то значение поля не изменится, а значит и не произойдет события onchange. Смысла проверять на пустоту нет, а если считаете, что будет "побочная" загрузка, ну так ее вообще осуществят без вашего скрипта. Полю типа file можно задать допустимые типы файлов и диалог будет отображать только их. Правда не все браузеры хорошо это поддерживают, есть и косяки, но проверять лучше именно по заданным типам. Итого (как пример):
<html>
<body>
<style>
.upload_preview img{
width: 80px;
height: auto;
margin-right: 10px;
display: inline-block;
}
</style>
<input type="file" id="upload_file" name="upload_file[]" multiple="" accept="image/jpeg,image/png,image/gif"/>
<div id="image_preview" class="upload_preview"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#upload_file').change(function() {
var f = this.files, i, r = new RegExp(this.accept.replace(/,/g,'|')), b = $('#image_preview');
for(i=0; i<f.length; ++i) {
if(r.test(f[i].type)) b.append("<img class='thumb' src='"+URL.createObjectURL(f[i])+"'>");
}
});
});
</script>
</body>
</html>
|
Цитата:
Вы меня не правильно поняли, затрет (заменит) не сервер, а сама кнопка (input), если мы добавим например 1 изображение то его миниатюра появится и оно нормально отправиться, но если мы нажмем по этой же кнопке и добавим еще 1 изображение то миниатюры станет 2, а вот в содержимом input будет только 1 изображение, которое было загружено последним + я хочу сделать что бы можна было удалить если не то выбрал. Похожая реализация в интернет-магазине "розетка" на отзывах. |
В таком случае multiple оправдано будет только в том случае, если можно выбирать по несколько изображений в разных каталогах. Но в лбом случае, одним полем выбора файла не получится, если хотите чтобы было и "еще добавить", значит добавляйте в форму еще поле выбора. Если только не хранить выбранное, используя одно поле.
|
| Часовой пояс GMT +3, время: 14:26. |