PHP*_*Fan 4 php ajax jquery image-uploading twitter-bootstrap-3
我正在使用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代码将文件上载到服务器.如果任何验证失败,相关的错误消息应在文件上载HTML控件上方以红色显示.
是否可以实现此功能？我听说使用AJAX上传文件是不可能的.我真的不知道这是神话还是事实.如果有人知道这件事,请详细向我解释.
tim*_*vin 13
是的,这是可能的.这是让你入门的东西.
注意:这使用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,然后在我正在使用的jQuery中定位该ID 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';
}
}