Можно ли загрузить изображение на сервер с помощью модального диалогового окна Bootstrap, jQuery, AJAX и PHP? Если да, то как? Если нет, то в чем причина?

Я использую PHP, jQuery(jquery-1.9.1.минута.js и jquery-ui-1.10.0.традиция.минута.Яш), технологии Ajax, фреймворк Bootstrap дизайн(начальной загрузки В3.0.0) и т. д.

Я относительно новичок в области веб-программирования.

Теперь в одном месте я хочу показать встроенное модальное диалоговое окно Bootstrap framework по щелчку кнопки. В этом модальном диалоговом окне будет элемент управления HTML-файлом для загрузки файла изображения. Пользователь выберет любой файл изображения с его / ее локальной машины по просмотр файлов. Затем после выполнения всех следующих необходимых проверок, таких как

  • правильное стандартное расширение изображения
  • ограничение максимального размера 5 Мб
  • минимальные размеры 940 px * 370 px

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

Возможно ли достичь такой функциональности? Я слышал что невозможно загрузить файлы с помощью AJAX. Я действительно не знаю, миф это или факт. Если кто-то знает об этом, пожалуйста, объясните мне подробно.

1 4
jquery php ajax twitter-bootstrap-3 image-uploading

1 ответ:

Да, это возможно. Вот тебе кое-что для начала.

Примечание: Для загрузки изображений используется класс PHP class.upload.php. (http://www.verot.net/php_class_upload.htm )

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

Просто создайте файл (index.html) и скопируйте/вставьте в него HTML и JavaScript. Затем создайте файл post.php и поместите в него PHP. Загрузите скрипт class.upload.php и создайте каталог с именем uploads. Дайте ему соответствующие разрешения (0755 или 0777). Храните все в одной папке для этого примера. Ты должен быть готов к отъезду.

можно даже поместить сообщения об успехах и ошибках прямо в модальный режим. Я просто использую alert() здесь для краткости. Если вы хотите поместить сообщения в модал, просто создайте <div> в модале, дайте ему идентификатор, а затем нацельте этот идентификатор на jQuery, где я использую alert(). Это довольно просто.

Edit: Добавлено сообщение в пример. :)

Вот HTML и jQuery (index.html)

<!DOCTYPE html>
    <html>
    <head>
        <title>Upload a Photo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
            <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

        <div class="container">
            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>

            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form id="form" enctype="multipart/form-data" role="form">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title">Upload Photo</h4>
                            </div>
                            <div class="modal-body">
                                <div id="messages"></div>
                                <input type="file" name="file" id="file">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script>
            $('#form').submit(function(e) {

                var form = $(this);
                var formdata = false;
                if(window.FormData){
                    formdata = new FormData(form[0]);
                }

                var formAction = form.attr('action');

                $.ajax({
                    type        : 'POST',
                    url         : 'post.php',
                    cache       : false,
                    data        : formdata ? formdata : form.serialize(),
                    contentType : false,
                    processData : false,

                    success: function(response) {
                        if(response != 'error') {
                            //$('#messages').addClass('alert alert-success').text(response);
                            // OP requested to close the modal
                            $('#myModal').modal('hide');
                        } else {
                            $('#messages').addClass('alert alert-danger').text(response);
                        }
                    }
                });
                e.preventDefault();
            });
        </script>
    </body>
</html>

И ваш PHP скрипт (post.php)

<?php

    require_once 'class.upload.php';

    $handle = new Upload($_FILES['file']);
    $handle->allowed = 'image/*';

    if($handle->uploaded) {
        $handle->Process('uploads');
        if($handle->processed) {
            echo 'Image uploaded';
        } else {
            echo 'error';
        }
    }
13