Step 1: Create HTML Page where put HTML Code.

Step 2: Second IN HTML Code Page Bottom(footer)Create Javascript like and put Jquery Code in Script tag.

Step 3: Create PHP File and php code copy past. after Jquery Code in $.ajax Code url apply which one on your php file name.

JS

/* file upload js */
    function sendFileToServer(formData, status)
    {
        var uploadURL = "<?= Yii::app()->createUrl('//order/uploadFiles') ?>"; //Upload URL
        var extraData = {}; //Extra Data.
        var jqXHR = $.ajax({
            xhr: function () {
                var xhrobj = $.ajaxSettings.xhr();
                if (xhrobj.upload) {
                    xhrobj.upload.addEventListener('progress', function (event) {
                        var percent = 0;
                        var position = event.loaded || event.position;
                        var total = event.total;
                        if (event.lengthComputable) {
                            percent = Math.ceil(position / total * 100);
                        }
                        //Set progress
                        status.setProgress(percent);
                    }, false);
                }
                return xhrobj;
            },
            url: uploadURL,
            type: "POST",
            contentType: false,
            processData: false,
            cache: false,
            data: formData,
            success: function (data) {
                console.log(data);
                data = $.parseJSON(data);
                if (data.error === 0) {
                    status.setProgress(100);
                    status.filename.html("<a href='" + data.link + "' target='_blank'>" + data.file + "</a>");
                    status.delete.attr('data-file', data.file);
                    $("#status1").html("File upload Done");
                    status.progressBar.hide(2000);
                } else {
                    this.abort.hide();
                    status.setProgress.hide();
                    status.delete.hide();
                    $("#status1").html(data.reason);
                }
            }
        });

        status.setAbort(jqXHR);
    }

    var rowCount = 0;
    function createStatusbar(obj)
    {
        rowCount++;
        var row = "odd";
        if (rowCount % 2 == 0)
            row = "even";
        this.statusbar = $("<div class='statusbar " + row + "'></div>");
        this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
        this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
        this.delete = $("<div class='delTempFile btn btn-xs red'><i class='fa fa-times'></i></div>").appendTo(this.statusbar);
        this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
        this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);

        obj.after(this.statusbar);

        this.setFileNameSize = function (name, size)
        {
            var sizeStr = "";
            var sizeKB = size / 1024;
            if (parseInt(sizeKB) > 1024)
            {
                var sizeMB = sizeKB / 1024;
                sizeStr = sizeMB.toFixed(2) + " MB";
            } else
            {
                sizeStr = sizeKB.toFixed(2) + " KB";
            }

            this.filename.html(name);
            this.size.html(sizeStr);
        }
        this.setProgress = function (progress)
        {
            var progressBarWidth = progress * this.progressBar.width() / 100;
            this.progressBar.find('div').animate({width: progress + "%"}, 10).html(progress + "% ");
            if (parseInt(progress) >= 100)
            {
                this.abort.hide();
            }
        }
        this.setAbort = function (jqxhr)
        {
            var sb = this.statusbar;
            this.abort.click(function ()
            {
                jqxhr.abort();
                sb.hide();
            });
        }
    }
    function handleFileUpload(files, obj)
    {
        for (var i = 0; i < files.length; i++)
        {
            var fd = new FormData();
            fd.append('file', files[i]);

            var status = new createStatusbar(obj); //Using this we can set progress.
            status.setFileNameSize(files[i].name, files[i].size);
            sendFileToServer(fd, status);

        }
    }
    $(document).ready(function ()
    {
        var obj = $("#dragandrophandler");
        obj.on('dragenter', function (e)
        {
            e.stopPropagation();
            e.preventDefault();
            $(this).css('border', '2px solid #0B85A1');
        });
        obj.on('dragover', function (e)
        {
            e.stopPropagation();
            e.preventDefault();
        });
        obj.on('drop', function (e)
        {

            $(this).css('border', '2px dotted #0B85A1');
            e.preventDefault();
            var files = e.originalEvent.dataTransfer.files;

            //We need to send dropped files to Server
            handleFileUpload(files, obj);
        });



        $(document).on('dragenter', function (e)
        {
            e.stopPropagation();
            e.preventDefault();
        });
        $(document).on('dragover', function (e)
        {
            e.stopPropagation();
            e.preventDefault();
            obj.css('border', '2px dotted #0B85A1');
        });
        $(document).on('drop', function (e)
        {
            e.stopPropagation();
            e.preventDefault();
        });

    });

    /* file upload js */

HTML

<div class="col-md-12">
<div class="col-md-12 no-padding" id="status1"></div>
<div id="file_uploader" class="col-md-12 no-padding">
<div id="dragandrophandler">Drag & Drop Files Here</div>
</div>
</div>

 

PHP

public function actionUploadFiles() {
        $res = array('error' => 1, 'reason' => 'Invalid Data');
        $uploadedFile = CUploadedFile::getInstanceByName("file");
        $fileTypes = array('image/jpg', 'image/jpeg', 'image/png', 'application/pdf');
        if ($uploadedFile) {
            if (in_array($uploadedFile->type, $fileTypes)) {
                $fileName = Yii::app()->easycode->genFileName($uploadedFile->extensionName);
                $uploadedFile->saveAs(UPLOAD . Yii::app()->params->tempFiles . $fileName);
                $link = Yii::app()->baseUrl . '/upload' . Yii::app()->params->tempFiles . $fileName;
                $res = array('error' => 0, 'file' => $fileName, 'link' => $link);
            } else {
                $res = array('error' => 1, 'reason' => 'Unsupported Files');
            }
        }
        echo CJSON::encode($res);

        Yii::app()->end();
    }