html5-FileReader接口

<!-- html 部分 -->
    <h5>html-FileReader</h5>
    <input id="upload" type="file" accept="image/*">
    <img id="img" src="">

    <!-- js 部分 -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        
        $(function(){
            $('#upload').change(function(){
                var reader = new FileReader()
                    
                reader.onload = function(){//文件讀取完成時 出發onload事件
                    var result = reader.result; //base64 編碼的文件存在FileReader.result中

                    $('#img').attr('src',result);

                    //選中文件轉換爲 Blob對象
                    var blob = dataURItoBlob(result);
                    console.log(blob)
                }
                reader.readAsDataURL(this.files[0]); //獲取base64 編碼
            });
        });

        //base64 轉 Blob對象，用於文件上傳
        function dataURItoBlob(dataURI) {  
            var byteString = atob(dataURI.split(',')[1]);  
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];  
            var ab = new ArrayBuffer(byteString.length);  
            var ia = new Uint8Array(ab);  
            for (var i = 0; i < byteString.length; i++) {  
                ia[i] = byteString.charCodeAt(i);  
            }  
            return new Blob([ab], {type: mimeString});  
        }  
    </script>