是否可以使用 Bootstrap 的模态对话框、jQuery、AJAX 和 PHP 将图像上传到服务器？如果是怎么办？如果不是，那是啥原因？
Posted
技术标签:
【中文标题】是否可以使用 Bootstrap 的模态对话框、jQuery、AJAX 和 PHP 将图像上传到服务器？如果是怎么办？如果不是，那是啥原因？【英文标题】：Is it possible to upload image to the server using Bootstrap's Modal dialog box, jQuery, AJAX and PHP? If yes how? If no what's the reason for it?是否可以使用 Bootstrap 的模态对话框、jQuery、AJAX 和 PHP 将图像上传到服务器？如果是怎么办？如果不是，那是什么原因？ 【发布时间】：2014-12-03 21:20:07 【问题描述】：我正在使用 PHP、jQuery（jquery-1.9.1.min.js 和 jquery-ui-1.10.0.custom.min.js）、AJAX、Bootstrap 设计框架（Bootstrap v3.0.0）等
我是 Web 编程领域的新手。
现在我想在一个地方显示 Bootstrap 框架的内置模式对话框，点击按钮。在此模式对话框中，将有一个用于上传图像文件的 html 文件控件。用户将通过浏览文件从他/她的本地计算机中选择任何图像文件。然后在执行以下所有必要的验证后，如
适当的标准图片扩展 最大大小限制为 5 MB 最小尺寸为 940 像素 * 370 像素文件应该使用 php 代码上传到服务器。如果任何验证失败，则相关的错误消息应在 File Upload HTML 控件上方以红色显示。
有没有可能实现这个功能？我听说不能使用 AJAX 上传文件。我真的不知道这是神话还是事实。如果有人知道这件事，请详细解释给我。
【问题讨论】：
可以结合Ajax、jQuery和php进行上传。看看这个developer.tizen.org/dev-guide/2.2.1/… @SonyMathew 链接已损坏 :( @pathros 参考这个链接：web-development-blog.com/archives/… 【参考方案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>，给它一个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';
【讨论】：
首先感谢您提供的帮助。你能帮我解决另一个问题吗？我想在成功上传图像文件后关闭模式对话框。你能把这个添加到你的代码中吗？ 当然可以。我将消息注释掉并添加了自动关闭模式的代码。以上是关于是否可以使用 Bootstrap 的模态对话框、jQuery、AJAX 和 PHP 将图像上传到服务器？如果是怎么办？如果不是，那是啥原因？的主要内容，如果未能解决你的问题，请参考以下文章