我使用的是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 MB
- 最小尺寸为940像素*370像素
应该使用PHP代码将文件上传到服务器。如果任何验证失败,相关的错误消息应以红色显示在File Upload 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>
,给它一个ID,然后在我使用alert()
的jQuery中以该ID为目标。这很容易
编辑:在示例中添加了消息。:)
这是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';
}
}