Tiny File Manager

Back Back Up Advanced Editor

<html>
<head>
<title>PHP AJAX Multiple Image Upload</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/form.css" />
<style>
#gallery img {
    padding: 20px;
}

#loader-icon {
    display: none;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"
    type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#uploadForm").on('submit', function(event) {
        event.preventDefault();
        var valid = false;
        $("input[type='file']").each(function() {
            if ($(this).val() != '') {
                valid = true;
            }
        });
   $("#validation-message-info").html("");
        if (valid) {
            $("#loader-icon").show();
            $("#btn-file-submit").hide();
            var formData = new FormData($("#uploadForm")[0])
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    if (data) {
                        $("#gallery").html(data);
                        $("#loader-icon").hide();
                        $("#validation-message-info").remove();
                        $("#btn-file-submit").hide();
                    }
                }
            });
        }
        else {
            $("#validation-message-info").html("Please choose atleast one file.");
        }
    });
});
</script>
</head>
<body>
    <div class="phppot-container ">
        <form id="uploadForm" action="" method="post">
            <h1>Upload Multiple Image</h1>
            <div class="row">
                <input name="userImage[]" class="user-image" type="file"
                    accept=".jpg, .jpeg, .png, .gif" />
            </div>
            <div class="row">
                <input name="userImage[]" class="user-image" type="file"
                    accept=".jpg, .jpeg, .png, .gif" />
            </div>
            <div class="row">
                <input name="userImage[]" class="user-image" type="file"
                    accept=".jpg, .jpeg, .png, .gif" />
            </div>
            <div class="row">
                <input type="submit" value="Submit" id="btn-file-submit" />
                <span id="validation-message-info" class="validation-message"></span>
             </div>
            <div id="loader-icon">
                <img src="loader.gif" />
            </div>
        </form>
        <h3>Image Preview</h3>
        <div id="gallery">No Images in Gallery</div>
    </div>

</body>
</html>