• Translate

1/27/2017

PHP Tutorial : How to Upload Photos with jQuery AJAX and PHP

Tutorial PHP | Tutorial Web Design |

Advertisement

PHP Tutorial : How to Upload Photos with jQuery AJAX and PHP | Interactive and responsive websites it has become a necessity, a website that can be used effectively are favored by visitors. Therefore, speed is very important to be noticed by any website owner.

One of the other needs that often exist at the application site is a feature that allows users to upload an image or picture, whether it's to complement the needs of the article, complete the profile photo or create a photo gallery.

Sure would be nice if users could upload photos with more concise and effective by utilizing AJAX technology (Asynchronous JavaScript and XML), so visitors do not need to move the page, do not have any need to feel refreshed and not loading.

PHP Tutorial : How to Upload Photos with jQuery AJAX and PHP

► How to Upload Images with AJAX and PHP
On previous occasions we've covered how to upload an image file with PHP alone, well on this occasion Jurnalweb.com will discuss how to upload a photo with PHP and AJAX. Help jQuery very easy for us in making a feature like this.


→ Create Upload Form
First created first form to upload and a location for a place to put pictures that have been uploaded later.
<div class="container">
    <form id="uploadForm" action="upload.php" method="post">
        <div id="targetPhoto">No Image</div>
        <div id="uploadFormContent">
            <label>Upload your photos:</label><br/>
            <input name="userImage" type="file" class="inputFile" />
            <input type="submit" value="Submit" class="btnSubmit" />
        </div>
    </form>
</div>

→ Display Design with CSS
After making the container upload photos, we further beautify the upload container with the help of CSS to make it look more attractive and orderly.
body {
    font-family: Arial;
    font-size: 14px;
}

.container {
    width: 500px;
    height:150px;
    margin: 50px auto;
    background: #ddd;
}

#targetPhoto{
    float:left;
    width:150px;
    height:150px;
    text-align:center;
    line-height:150px;
    font-weight: bold;
    color: #C0C0C0;
    background-color: #333;
    overflow:auto;
}

#uploadFormContent{
    float:right;
    padding: 35px 20px 35px 0;
}
#uploadFormContent label{
    font-weight: bold;
    color: #333;
    font-size: 18px;
}
.btnSubmit {
    background-color: green;
    padding:10px;
    border: #3FA849 1px solid;
    color: #FFFFFF;
}
.inputFile {
    padding: 9px;
    background-color: #FFFFFF;
}

→ Add Script jQuery Ajax
Insert first jQuery script in the [head], then because we will upload the photo to the AJAX so no switching transition or refresh the page, then we need to add the jQuery script to do that, which is to send a form to file upload.php. Put this script header section, right after jquery loaded.
$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "upload.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
            $("#targetPhoto").html(data);
            },
              error: function()
            {
            }           
       });
    }));
});

→ PHP scripts for the upload process
This script to handle files sent through the form with the help of jQuery Ajax in order to do the upload process. Because for the purposes of this file upload PHP is an urgent need. The uploaded files will be stored in the images directory, then displayed in html img src tag.
if(is_array($_FILES)) {
    if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
        $sourcePath = $_FILES['userImage']['tmp_name'];
        $targetPath = "images/".$_FILES['userImage']['name'];
        if(move_uploaded_file($sourcePath,$targetPath)) {
?>
            <img src="<?php echo $targetPath; ?>" width="150px" height="150px" />
<?php
        }
    }
}

→ Download
If you are interested to see the full script and give it directly, you can download and put on your server to try.
Reading Resources: jurnalweb.com 

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.