Custom AJAX File Uploader

I am very happy to share custom AJAX file up loader. It is very simple and using basic codes. So you can easily understand my code.

How to integrate this code ?

1. First you create index file, index.php

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<form id="myUploadForm" name="myUploadForm" action="" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" id="fileUpload" multiple="multiple" />
<input type="hidden" name="uploadedFilename" id="uploadedFilename" value="" />
</form>
<ul id="filelist">

</ul>
<script type="text/javascript">
$(function() {

    $(".removeUploadedFile").live('click',function() {
        var sel = $(this);
        if(!confirm("Do you want to remove this file ?")) return false;
        $.post('request.php',{action: 'remove', file: sel.attr('rel')}, function(data){
            if(data>0) {
                sel.closest('li').remove();
            }
        });
    });


    $("#fileUpload").change(function (e) {
            var sel = $(this);
            $.map($('#fileUpload').get(0).files, function(file) {
                $("#uploadedFilename").val(file.name);
                     e.preventDefault();
                    var formData = new FormData(sel.parents('form')[0]);
           
                    $.ajax({
                        url: 'request.php',
                        type: 'POST',
                        xhr: function() {
                            var myXhr = $.ajaxSettings.xhr();
                            return myXhr;
                        },
                        success: function (data) {
                            $("#filelist").append(data);
                            $("#fileUpload").val('');
                        },
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                    return false;
            }); 
     });
});
</script>

2. Create another file request.php for AJAX call, request.php

<?php

switch ($_REQUEST['action']) {

        case 'upload':
        $targetPath = "uploads/";
        for($i=0; $i<count($_FILES['file']['name']); $i++){
               
                $tempFile =   $_FILES['file']['name'][$i];
                if($tempFile == $_REQUEST['uploadedFilename']){
                    //$targetFile =  str_replace('//','/', $targetPath) . $newFileName;
                    $cpy=0;
                    do {
                       
                        if($cpy>0)
                        $fileName="Copy".$cpy.$tempFile;
                        else $fileName=$tempFile;
                        $targetFile =  str_replace('//','/',$targetPath) .$fileName;
                        $cpy++;
                    }while(is_file($targetFile));
                       
                    if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $targetFile)) {
                        echo "<li>".$fileName."&nbsp;&nbsp;<a href='#NOD' class='removeUploadedFile' rel='".$fileName."'>Remove</a><input type='hidden' name='hdnAttach[]' value='".$fileName."' ></li>";
                    } else{
                        echo "<li>There was an error uploading the file(".$fileName."), please try again! </li>";
                    }
                   
                }
               
        }
        break;
       
        case 'remove':
            if(file_exists("uploads/".$_POST['file'])) {
                unlink("uploads/".$_POST['file']);
                    echo 1;
                }
        break;

}

?>

3. Create a folder 'uploads' for upload image.The uploaded image should be stored in this folder.

 

 

Root Path :