Ajax File Upload Without Refreshing Using JQuery And PHP

Ajax File Upload without refreshing using jQuery and PHP

Contents

Welcome on Pakainfo.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Ajax File Upload with PHP

In this post we will show you Best way to implement Ajax File Upload using jQuery and PHP, hear for How to upload image using ajax in php example with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Example 1 : Ajax File Upload with PHP

we use simple external libs jQuery AJAX thrugh implement image or file upload. There is a simple HTML form with file input form field and a simple submit button. On submitting method the form with the selected each image file, the AJAX method script will be run or executed.

HTML Image Upload Form – Index Part


Simple Upload Image or File:

PHP FILE or Image Upload via AJAX Method

Example 2 : Ajax File Upload using jQuery and PHP

HTML Code

      
    
        Select file to upload

CSS Code

#filedragdrop{
    border: 3px dashed #0087F7;
    border-radius: 5px;
    background: #F3F4F5;
    cursor: pointer;
}
#filedragdrop{
    min-height: 150px;
    padding: 54px 54px;
    box-sizing: border-box;
}
#filedragdrop p{
    text-align: center;
    margin: 2em 0;
    font-size: 16px;
    font-weight: bold;
}
#livefilein{
    display: none;
}

JavaScript Code


$(function(){
    $("#filedragdrop").click(function(){
        $("#livefilein").click();
    });
    
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    $('input[type=file]').on('change', fileUpload);
});

function fileUpload(event){
    //notify user about the file upload status
    $("#filedragdrop").html(event.target.value+" uploading...");
    
    //get selected file
    files = event.target.files;
    
    //form data check the above bullet for what it is  
    var data = new FormData();                                   

    //file data is presented as an array
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if(!file.type.match('image.*')) {              
            $("#filedragdrop").html("Please check choose an images or file.");
        }else if(file.size > 1048576){
            //check here file size like as a  (in bytes)
            $("#filedragdrop").html("Sorry, your image or file is too large  min (>1 MB)");
        }else{
            //append the your  uploadable file to simple FormData object
            data.append('file', file, file.name);
            
            //create a new XMLHttpRequest
            var datarequest = new XMLHttpRequest();     
            
            //post file data for upload
            datarequest.open('POST', 'upload.php', true);  
            datarequest.send(data);
            datarequest.onload = function () {
                //get dataresult and show the uploading status
                var dataresult = JSON.parse(datarequest.dataresultText);
                if(datarequest.status === 200 && dataresult.status == 'ok'){
                    $("#filedragdrop").html("File has been uploaded successfully. Click to upload another.");
                }else if(dataresult.status == 'type_err'){
                    $("#filedragdrop").html("Please simple choose an images or  file. Click to all the any upload another.");
                }else{
                    $("#filedragdrop").html("Some problem issued occured, please again to try again.");
                }
            };
        }
    }
}

Upload File to the Server (upload.php)

Example

I hope you have Got ajax image upload without refreshing page using jquery And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.