Мультизагрузка изображений используя jQuery, Ajax и PHP

По интернету есть много запросов о том, как загрузить несколько изображений без обновления страницы. Таким образом, был написан простой учебник о том как загрузить несколько изображений с помощью JQuery, Ajax и PHP.

Существуют два способа отображения изображений после загрузки. Вы можете отображать изображения без хранятся в папке или хранить в папке. Этот метод является очень коротким, легким и полезным. Также вы можете легко реализовать эту систему на ваших веб-проектов.

Файл index.php:

JavaScript код: Файл содержит некоторые JavaScript и HTML коды. Все коды приведены ниже.

Сначала мы должны включать в себя два внешних файлов JS. Одним из них является минимальным файлом JQuery и другой файл jquery.form.js используется для Ajax формы с отправкой файлов.

Подключаем JavaScript:

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

Теперь напишем код JavaScript для отправки формы и отображения загруженных изображений.

<script type="text/javascript">
$(document).ready(function(){
	$('#images').on('change',function(){
		$('#multiple_upload_form').ajaxForm({
			//display the uploaded images
			target:'#images_preview',
			beforeSubmit:function(e){
				$('.uploading').show();
			},
			success:function(e){
				$('.uploading').hide();
			},
			error:function(e){
			}
		}).submit();
	});
});
</script>

HTML код:

имя входящего файла определяется как массив для загрузки нескольких файлов, а также используются несколько атрибутов для поддержки нескольких загрузок.

<form name="multiple_upload_form" id="multiple_upload_form" enctype="multipart/form-data" action="upload.php">
    <input type="hidden" name="image_form_submit" value="1"/>
    <label>Choose Image</label>
    <input type="file" name="images[]" id="images" multiple >
    <div class="uploading none">
        <label>&nbsp;</label>
        <img src="uploading.gif" alt="uploading......"/>
    </div>
</form>

Создайте div с идентификатором цели который определен по указанному выше JavaScript кода. Загруженные изображения будут отображаться на этом div. Также вы можете изменить этот идентификатор DIV, но помните, что целевое значение опции JavaScript (target: ‘# images_preview’) будет то же самое что и div с этим идентификатором.

<div id="images_preview"></div>

Файл upload.php

Файл содержит некоторые PHP коды для процесса загрузки и генерирует вид изображения. Есть два способа загрузки и отображения изображения.

1 – Одним из способов является создание папки с именем uploads/. Загруженные изображения будут хранится в этой папке.

<?php
    $images_arr = array();
    foreach($_FILES['images']['name'] as $key=>$val){
        //upload and stored images
        $target_dir = "uploads/";
        $target_file = $target_dir.$_FILES['images']['name'][$key];
        if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){
            $images_arr[] = $target_file;
        }
    }
?>

2 – Вы можете загружать и отображать изображения без хранятся в папке.

<?php
    $images_arr = array();
    foreach($_FILES['images']['name'] as $key=>$val){
        //display images without stored
        $extra_info = getimagesize($_FILES['images']['tmp_name'][$key]);
        $images_arr[] = "data:" . $extra_info["mime"] . ";base64," . base64_encode(file_get_contents($_FILES['images']['tmp_name'][$key]));
    }
?>

Создание просмотра изображений:

После загрузки изображения, мы должны  генерировать просмотр. Данный просмотр будет отображаться на целевом div’e.

<?php
if(!empty($images_arr)){ 
    foreach($images_arr as $image_src){ ?>
        <ul>
            <li >
                <img src="<?php echo $image_src; ?>" alt="">
            </li>
        </ul>
<?php }
}
?>

Если вы имеете любой вопрос по этому учебнику, пожалуйста, не стесняйтесь обращаться или вы можете разместить свои ценные замечания по указанной ниже форме комментария.

Скачать исходник