Geek Answers Handbook

Can I upload an image to the server using the Bootstrap Modal, jQuery, AJAX and PHP dialog box? If so, how? If there is no reason for this?

I use PHP, jQuery (jquery-1.9.1.min.js and jquery-ui-1.10.0.custom.min.js), AJAX, Bootstrap design framework (Bootstrap v3.0.0), etc.

I am relatively new to web programming.

Now in one place I want to show the Bootstrap framework of the built-in modal dialog with the click of a button. In this modal dialog box, an HTML file control will be created to load the image file. The user will select any image file from his local computer, viewing the files. Then, after performing all of the following necessary validations, such as

  • correct standard image extension
  • 5 MB maximum size limit
  • minimum dimensions 940 px * 370 px

The file must be uploaded to the server using PHP code. If any check is not performed, the corresponding error message should be displayed in red above the file upload control.

Is it possible to achieve this functionality? I heard that it is not possible to upload files using AJAX. I really don't know if this is a myth or a fact. If anyone knows about this, please explain to me in detail.

+4
source share
1 answer

Yes it is possible. Here's something to get you started.

. PHP class.upload.php. (http://www.verot.net/php_class_upload.htm)

. , , . , ..

(index.html) / HTML JavaScript. post.php PHP. class.upload.php script, uploads. (0755 0777). . .

. alert() . , <div> , ID 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">&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 script (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';
        }
    }
+13

More articles:


All Articles