Можно ли загрузить изображение на сервер, используя модальное диалоговое окно Bootstrap, jQuery, AJAX и PHP? Если да, то как? Если нет, в чем причина?
я использую PHP, jQuery (jquery-1.9.1.min.js и jquery-ui-1.10.0.custom.min.js), AJAX, среда разработки Bootstrap (Bootstrap v3.0.0) и т. Д.
Я относительно новичок в области веб-программирования.
Сейчас в одном месте хочу показать Встроенное модальное диалоговое окно Bootstrap по нажатию кнопки. В этом модальном диалоговом окне будет элемент управления файлом HTML для загрузки файла изображения. Пользователь выберет любой файл изображения со своего локального компьютера, просматривая файлы. Затем после выполнения всех следующих необходимых проверок, таких как
- правильное стандартное расширение изображения
- максимальный размер не более 5 МБ
- минимальные размеры 940 пикселей * 370 пикселей
файл должен быть загружен на сервер с использованием кода PHP. Если какая-либо из проверок не пройдена, соответствующее сообщение об ошибке должно отображаться красным цветом над элементом управления «Загрузка файла HTML».
Можно ли добиться этой функциональности? Я слышал, что невозможно загружать файлы с помощью 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';
}
}
Другие решения
Других решений пока нет …