html 5操作ファイルFileReaderメソッド

//javaScript
    var fileInput = document.getElementById("test-image-file"),
        info = document.getElementById("test-image-info"),
        preview = document.getElementById("test-image-preview");
        //  change  ，        
            
        fileInput.addEventListener("change", function() {
 
            //       
            preview.style.backgroundImage = "";

            //        
            if (!fileInput.value) {
                info.innerHTML = "    "
                return;
            }

            //  file  
            var file = fileInput.files[0];
            console.log(file); //  file  

            info.innerHTML = "  " + file.name + "
" +//         
                             "  " + file.size + "
" + //         
                             "  " +file.lastModifiedDate; //    file             
            //           
            if (file.type !== "image/jpeg" && file.type !=="image/png" && file.image !== image/gif) {
                alert("      ");
                return;
            }

            //    reader    
            var reader = new FileReader() // FileReader()          

            reader.onload = function(e) {//onload  ，          

                 var data = e.target.result;//           ，    ， onload       
                    
                 preview.style.backgroundImage = "url(" + data + ")";

             } 
             // DataURL       ;
             reader.readAsDataURL(file);

        });