文件上传原理--FileReader

单个文件：
<div>
    <input value="上传" type="file" id="photos_upload">
    <img src="" id="result" width="100px" height="100px"/>
</div>

<script>
    $("#photos_upload").on("change",function () {
        var file =  $(this)[0].files[0]; //document.getElementById('photos_upload').files[0];
        var reader = new FileReader();
        reader.onload = function ( event ) {
            var txt = event.target.result; //base64
            document.getElementById("result").src = txt;
        };
        reader.readAsDataURL(file);
    })
</script>
多个文件：（只需在单个文件的基础上添加递归）

<div>
    <input value="上传" type="file" id="photos_upload" multiple>
    <img src="" class="re1" width="100px" height="100px"/>
    <img src="" class="re2" width="100px" height="100px"/>
</div>

$("#photos_upload").on("change",function (event) {
    var i=0;
    fileUpload(0,event);
})
function fileUpload(i,event){
    var length = $(event.target)[0].files.length;
    if(i>=length){
        return;
    }
    var file  =  $(event.target)[0].files[i];
    var reader = new FileReader();
    reader.onload = function ( event ) {
        var txt = event.target.result; //base64
        $(".re"+i).attr("src",txt);
    };
    reader.readAsDataURL(file);
    i++;
    fileUpload(i,event);
}

巴特西

文件上传原理--FileReader

最新文章

热门文章