Я использую PHP, jQuery (jquery-1.9.1.min.js и jquery-ui-1.10.0.custom.min.js), AJAX, структуру дизайна Bootstrap (Bootstrap v3.0.0) и т. Д.
Я относительно новичок в области веб-программирования.
Теперь в одном месте я хочу показать встроенное модальное диалоговое окно платформы Bootstrap, щелкнув по кнопке. В этом модальном диалоговом окне будет создан элемент управления файлами HTML для загрузки файла изображения. Пользователь будет выбирать любой файл изображения со своего локального компьютера, просматривая файлы. Затем после выполнения всех следующих необходимых проверок, таких как
файл должен быть загружен на сервер с помощью PHP-кода. Если какая-либо проверка не выполняется, соответствующее сообщение об ошибке должно отображаться красным цветом над элементом управления загрузкой файлов.
Возможно ли достичь этой функциональности? Я слышал, что загрузка файлов с помощью AJAX невозможна. Я действительно не знаю, это миф или факт. Если кто-то знает об этом, пожалуйста, объясните мне подробно.
Да, это возможно. Вот вам кое-что, чтобы вы начали.
Примечание. Для загрузки изображений используется класс 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() .Это довольно легко.
Изменить: добавлен обмен сообщениями на пример. 🙂
Вот 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">×</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'; } }