FileUploadUsingAjaxToolkit

<!--
- This Visualforce Page is created for Upload file 
- as a Attachment Using Salesforce ajax Toolkit.
-
- @author       Sagar Sindhi
- @since        17.11.2017
- @revision     N/A
-
-->

<apex:page sidebar="false">
    
    <!-- Jquery Script --> 
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"/>
    <!-- Salesforce Ajax toolkit -->
    <apex:includeScript value="/soap/ajax/32.0/connection.js"/>
    
    <apex:sectionHeader title="Upload Files as Attachment"/>
    
    <apex:form id="frm">
        
        <apex:pageBlock Title="file Upload ">            
            <input type="File" id="newAttFiles" />
            <input type="button" value="Upload" onclick="addAttachment();" />
            <p id="msg" font-size="initial"></p>
        </apex:pageBlock>
               
       <!------ Loading Spinner div----------->
        <div id="loding" style="display:none">
            <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;height: 100%;opacity:0.75;width:100%;"> 
                <div class="waitingHolder" style="top:130px; width: 40px;">
                    <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                    <span class="waitingDescription">File is Uploading . . . .</span>
                </div>
            </div>
        </div> 
         
    </apex:form>   
    
    <script>    
        <!-- Get the Sforce Session Id created by Ajax toolkit -->
        sforce.connection.sessionId = '{!GETSESSIONID()}';        
    </script>
    
    <script>
    
        var recordID = '';
        $( document ).ready(function(){
            
            <!-- Get Record Id from URL--->
            var getUrlParameter = function getUrlParameter(sParam) {
                var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                    sURLVariables = sPageURL.split('&'),
                    sParameterName,
                    i;
            
                for (i = 0; i < sURLVariables.length; i++) {
                    sParameterName = sURLVariables[i].split('=');
            
                    if (sParameterName[0] === sParam) {
                        return sParameterName[1] === undefined ? true : sParameterName[1];
                    }
                }
            };
            
            recordID=getUrlParameter('id');
        });

        <!--Function for File Upload -->
        function addAttachment()
        {      
            if(recordID == undefined){
                alert('Please Enter Record Id in URL');
                
                $('#newAttFiles').val('');
                return;
            }

            var attachFile = $("#newAttFiles")[0].files[0];
           
            if(attachFile  == undefined){
                alert('No file have been selected.');
                return;
            }
            var reader = new FileReader();
            
            if(attachFile.size > 26214400){  //Where 26214400 is byte equivalent of 25MB
                alert('You can upload file till 25MB ');
            }
            else
            {
               $("#loding").show(); 
            }
         
            reader.onload = function(e) {
                
                var attachment = new sforce.SObject("Attachment");  
                attachment.Name = attachFile.name;
                attachment.IsPrivate = false;  
                attachment.ContentType = attachFile.type; 
                var binary = "";
                var bytes = new Uint8Array(e.target.result);
                var length = bytes.byteLength;
                for (var i = 0; i < length; i++)
                {
                    binary += String.fromCharCode(bytes[i]);
                }
                attachment.Body = (new sforce.Base64Binary(binary)).toString();
                attachment.ParentId = recordID;   
                
                sforce.connection.create([attachment],
                {
                     onSuccess : function(result, source)
                     {   
                         if(result[0].getBoolean("success")) {
                             
                             console.log('file added successfully:' + result[0].id);
                             
                             $('#loding').hide();
                             $('#msg').text("file upload successfully with ID : "+result[0].id).fadeIn();
                             setInterval(function() {
                                 $('#msg').fadeOut();
                             }
                             ,10000);
                         }
                         
                     },
                     onFailure : function(error, source)
                     {
                         $('#loding').hide();
                         $('#msg').text("an error has occurred " +error).fadeIn();
                         setInterval(function() {
                             $('#msg').fadeOut();
                         }
                         ,10000);
                     }
                     
                });  
                
                $('#newAttFiles').val('');
            };
            
            reader.readAsArrayBuffer(attachFile);
            
        }
        <!--End of Function for File Upload -->
       
    </script>
    
</apex:page>