是否可以使用Bootstrap';s模式对话框,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?

我使用的是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">&times;</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';
        }
    }