PHP drag and drop upload photos

HTML page

<div id="drop_area" style="border: 1px solid red;height: 100px;width: 100px">

<img src="" style="height: 100%;width: 100%">

</div>

<button onclick="zphxhrupload('photo')">上传</button>
<script type="text/javascript">

    document.addEventListener ( "drop", function ( e) {// off the 
        e.preventDefault (); 
    }) 
    document.addEventListener ( "DragLeave", function (E) {// delayed release 
        e.preventDefault (); 
    } ) 
    document.addEventListener ( "DragEnter", function (E) {// dragged 
        e.preventDefault (); 
    }) 
    document.addEventListener ( "dragOver", function (E) {// dragged 
        e.preventDefault (); 
    }) 



    var = document.getElementById Box ( 'drop_area'); // drop zone 
    box.addEventListener ( "drop", function (E) { 
        var = e.dataTransfer.files the fileList; // Get the object file 
        // detect It is a drag and drop files onto the page of the operation 
        if (fileList.length == 0){
            return false;
        } 
        // drag images to the browser, the preview function can be realized 
        @ predetermined video format 
        Array.prototype.S the String.fromCharCode = (2); 
        Array.prototype.in_array = function (E) { 
            var = R & lt new new the RegExp (the this. this.S + E + S); 
            return (R.TEST (this.S + this.join (this.S) + this.S)); 
        }; 
        var video_type = [ "Video / MP4", "Video / OGG "]; 

        // Create a connection url for the src attribute references 
        var fileurl = window.URL.createObjectURL (the fileList [0]); 
        the console.log (the fileList [0] .Type) 
        IF (the fileList [0] .type.indexOf ( 'image') === 0) {// if image 
            var STR = "<IMG width = '100%' height = '100%' the src = '" + fileurl + "'>"; 
            document.getElementById ( 'drop_area').innerHTML=str;
        } else if (fileList [0] .type == 'audio / mp3') {// If MP3 
            the console.log ( 'MP3') 
            var STR = '<Audio the src = "' + fileurl + '" Controls = "Controls "> 123 </ Audio> '; 
            document.getElementById (' drop_area ') the innerHTML = STR;. 

        } the else IF (video_type.in_array (the fileList [0] .Type)) {// if it is within a predetermined video format 
            var str = "<Video width = '100%' height = '100%' = Controls 'Controls' the src = '" + fileurl + "'> </ Video>"; 
            . document.getElementById ( 'drop_area') the innerHTML = STR; 
        } else {// other formats, output file name 
            // alert ( "no preview"); 
            var STR = "file name:" + fileList [0] .name ;
            document.getElementById('drop_area').innerHTML=str;
        }
        resultfile = fileList[0];
    }, to false); 

    function zphxhrupload (URL) { 
        var = new new XHR the XMLHttpRequest (); // Step 
        // Create a FormData objects 
        var formData = new FormData (); // ++++++++++ 
        // append file data 
        formData.append ( 'file', resultfile); 
        // POST embodiment 
        xhr.open ( 'POST', url) ; // second step 
        // transmission request 
        xhr.send (formData); // first step three 
        // ajax return 
        xhr.onreadystatechange = function () {// fourth step 
            IF (xhr.readyState == == 200 is xhr.status &&. 4) { 
                the console.log (xhr.responseText); 
            } 
        }; 
        // set timeout 

        xhr.timeout = 10000;
        = function xhr.ontimeout (Event) { 
            Alert ( 'Request Timeout!'); 
        } 
    } 


the PHP page

$allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["file"]["name"]);
    echo $_FILES["file"]["size"];
    $extension = end($temp);     // 获取文件后缀名
    if ((($_FILES["file"]["type"] == "image/gif")
            || ($_FILES["file"]["type"] == "image/jpeg")
            || ($_FILES["file"]["type"] == "image/jpg")
            || ($_FILES["file"]["type"] == "imagepeg")
            || ($_FILES["file"]["type"] == "image/x-png")
            || ($_FILES["file"]["type"] == "image/png"))
        && ($_FILES["file"]["size"] < 204800)   // 小于 200 kb
        && in_array($extension, $allowedExts))
    {
        if ($_FILES["file"]["error"] > 0)
        {
            echo "Error ::" $ _FILES [ "File"] [ "error"] "<br>";.. 
        } 
        the else 
        { 
            // determine upload directory under the current directory if the file exists 
            // if there is no upload directory, you We need to create it, upload directory permissions to 777 
            $ CONT = End ($ the TEMP); 
            .. "." $ img_name = uniqid () $ CONT; 
            // if the file upload directory will be uploaded to the file does not exist under the upload directory 
            move_uploaded_file ($ _FILES [ "file"] [ "tmp_name"], " file Upload path" $ img_name.); 
        } 
    } 
    the else 
    { 
        echo "NO"; 
    } 
}