Ajax File Upload without refreshing using jQuery and PHP

Ajax File Upload without refreshing using jQuery and PHP

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.

Also Read :  Angular 6 Toast Message Notifications From Scratch

HTML Image Upload Form – Index Part

<form id="liveform" action="upload.php" method="post">
<label>Simple Upload Image or File:</label><br/>
<input name="userImage" type="file" class="liveifle" />
<input type="submit" value="Submit" class="mybtn" />
</form>

PHP FILE or Image Upload via AJAX Method

<script type="text/javascript">
$(document).ready(function (e){
	$("#liveform").on('submit',(function(e){
	e.preventDefault();
		$.ajax({
			url: "http://www.Pakainfo.com/php/api/upload.php",
			type: "POST",
			data:  new FormData(this),
			contentType: false,
			cache: false,
			processData:false,
			success: function(data){
			$("#targetLayer").html(data);
			},
			error: function(){} 	        
		});
	}));
});
</script>

Example 2 : Ajax File Upload using jQuery and PHP

HTML Code

<form>      
    <div id="filedragdrop">
        <p>Select file to upload</p>
    </div>
    <input type="file" name="livefilein" id="livefilein" />
</form>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
$(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)

<?php
if(isset($_POST) == true){
    $fimgname = time().'_'.basename($_FILES["file"]["name"]);
    
    $tempdir = "uploads/";
    $uploadpath = $tempdir . $fimgname;
    
    $fileType = pathinfo($uploadpath,PATHINFO_EXTENSION);
    $filetyupes = array('jpg','png','jpeg','gif');
    
    if(in_array($fileType, $filetyupes)){
        if(move_uploaded_file($_FILES["file"]["tmp_name"], $uploadpath)){
            $dataresult['status'] = 'ok';
        }else{
            $dataresult['status'] = 'err';
        }
    }else{
        $dataresult['status'] = 'type_err';
    }
    
    echo json_encode($dataresult);
}

Example

Also Read :  ANGULAR 2 TUTORIAL FOR BEGINNERS STEP BY STEP

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.

Recommended For You.

Ajax Image Upload without Refreshing Page using Jquery
Ajax Image Upload without Refreshing Page using Jquery In this Post We Will Explain About is Ajax Image Upload without Refreshing

Add a Comment

Your email address will not be published. Required fields are marked *