JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5 File Drag and Drop Upload with jQuery and PHP | Tutorialzine Demo</title>
        
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body>
        
        <header>
            <h1>HTML5 File Upload with jQuery and PHP</h1>
        </header>
        
        <div id="dropbox">
            <span class="message">Drop images here to upload. <br /><i>(they will only be visible to you)</i></span>
        </div>
        
        <footer>
            <h2>HTML5 File Upload with jQuery and PHP</h2>
            <a class="tzine" href="http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/">Read &amp; Download on</a>
        </footer>
        
        <!-- Including The jQuery Library -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        
        <!-- Including the HTML5 Uploader plugin -->
        <!--<script src="assets/js/jquery.filedrop.js"></script>-->
        
        <!-- The main script file -->
        <!--<script src="assets/js/script.js"></script>-->
        <script src="assets/js/upload.js"></script>
    
    </body>
</html>

CSS

/*-------------------------
    Simple reset
--------------------------*/



*{
    margin:0;
    padding:0;
}



/*-------------------------
    General Styles
--------------------------*/



html{
    background:url('../img/background_tile_2.jpg');
    min-height:100%;
    position:relative;
    
}

body{
    color:#fff;
    min-height:600px;
    font:14px/1.3 'Segoe UI',Arial, sans-serif;
}

a, a:visited {
    text-decoration:none;
    outline:none;
    color:#54a6de;
}

a:hover{
    text-decoration:underline;
}

header, footer{
    display:block;
}



/*-------------------------
    Header Styles
--------------------------*/



header{
    background:url('../img/background_tile_1.jpg');
    padding:75px;
    position: relative;
}

header:before,
#dropbox:before{
    display: block;
    content:'';
    height:4px;
    width:100%;
    background:url('../img/blue_line.jpg');
    position: absolute;
    top:0;
    left:0;
    box-shadow:0 2px 2px rgba(0,0,0,0.4);
}


h1{
    background:url('../img/logo.jpg') no-repeat top center;
    height:92px;
    overflow: hidden;
    text-indent: -99999px;
    text-align: center;
}



/*-------------------------
    Dropbox Element
--------------------------*/



#dropbox{
    background:url('../img/background_tile_3.jpg');
    
    border-radius:3px;
    position: relative;
    margin:80px auto 90px;
    min-height: 290px;
    overflow: hidden;
    padding-bottom: 40px;
    width: 990px;
    
    box-shadow:0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
}

    /*#dropbox.enter {*/
        /*background: #bbb;*/
    /*}*/
    /*#dropbox.leave {*/
        /*background:url('../img/background_tile_3.jpg');*/
    /*}*/
    /*#dropbox.over {*/
        /*background: red;*/
    /*}*/

#dropbox .file {
    text-align: center;
    padding: 10px;
    margin: 10px;
    background: #000000;
    color: #ffffff;
}


#dropbox .message{
    font-size: 11px;
    text-align: center;
    padding-top:160px;
    display:...

JavaScript

$(function(){
    var dropbox;
    jQuery.event.props.push("dataTransfer");
    dropbox = $('#dropbox');
    dropbox.bind('drop', drop));

    function drop(e) {
        var files = e.dataTransfer.files;
        if (files === null || files === undefined) {
            console.log('Ошибка!');
            return false;
        }

        console.log(files);

        $.each(files, function(key, file){
            $(dropbox).find('.message').remove();
            if (typeof(Reader) === undefined){
                $(dropbox).append("<div class='file'>"+file.name+"</div>");
            }else{
                var reader = new FileReader();
                reader.onload = function(event) {
                    alert(1);
                };
                reader.readAsDataURL(file);
            }
        });

        e.preventDefault();
        return false;
    }

});