Upload HTML5

by mhctoledo

HTML

<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.css">
<form method="post" enctype="multipart/form-data" action="upload.php">
        <input type="file" name="imgs" id="imgs" >
        <button id="boton_submit" name="boton_submit">Pulsa!</button>
    </form>

JavaScript

$(window).load(function(){
    var formdata = new FormData();
    var reader,len,file;
    
    $("#imgs").on("change",function(evt){
        len = this.files.length;
        file = this.files[0];
        alert(file.type);
        if ( window.FileReader ) {
            reader = new FileReader();
            reader.readAsDataURL(file);
        }
        formdata.append("imgs", file);
    });
    
    $("#boton_submit").on("click",function(evt){
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function (res) {
                alert(res);
            }
        });
    });
});