Поиск по этому блогу

среда, 29 августа 2018 г.

php multi image upload загрузка множества фото

Здравствуйте!

Встала тут задачка сделать загрузку множества фотографий с динамическими input . Да имеется возможность multiple но не всегда она удобна. Был найден и использован следующий вариант. Требует jQuery для работы.

php, js, jquery, html, программирование, инструкция, полезное,

HTML
<div class="field_wrapper">
<input type="file" name="photos[]" class="form-control">
</div>
<i class="add_button fa fa-plus">Добавить ещё</i> 
JS
<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10;
    var addButton = $('.add_button');
    var wrapper = $('.field_wrapper');
    var fieldHTML = '<br><input type="file" name="photos[]" value="" class="form-control">';
    var x = 1;
   
    $(addButton).click(function(){
        if(x < maxField){
            $(wrapper).append(fieldHTML);
        }
    });
   
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });
});
</script>
PHP
$total = count($_FILES['photos']['name']);
for( $i=0 ; $i < $total ; $i++ ) {
$tmpFilePath = $_FILES['photos']['tmp_name'][$i];
        $photo = generateFilename();
$photo.=".jpg";
move_uploaded_file($tmpFilePath, "../uploads/".$photo); 
          }

В коде так же используется самописная функция generateFilename которая возвращает созданное имя файла:

function generateFilename(){
$chars = 'abdefhiknrstyz123456789_';
$string = '';
for ($i = 0; $i < 30; $i++) {
$string .= substr($chars, rand(1, 24) - 1, 1);
}
return $string;
}


Надеюсь код был полезен.
Успехов и хорошего дня!

Комментариев нет:

Отправить комментарий

Поделитесь своим мнением.