亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

從輸入表單獲取Base64編碼的文件數據

從輸入表單獲取Base64編碼的文件數據

莫回無 2019-11-25 10:49:50
我有一個基本的HTML表單,可以從中獲取在Firebug中檢查的一些信息。我唯一的問題是,在將文件數據發送到服務器之前,我試圖對文件數據進行base64編碼,然后將其以該格式保存到數據庫。<input type="file" id="fileupload" />在Javascript + jQuery中:var file = $('#fileupload').attr("files")[0];我有一些基于可用javascript的操作:.getAsBinary()、. getAsText()、. getAsTextURL但是,這些都不返回可以插入的可用文本,因為它們包含不可用的“字符” -我不想在上傳的文件中出現“回發”,并且我需要針對特定對象的多種形式,因此重要的是獲取文件并以這種方式使用Javascript。我應該如何以一種可以使用廣泛使用的Javascript base64編碼器的方式獲取文件?謝謝更新-從這里開始賞金,需要跨瀏覽器支持?。?!這是我的位置:<input type="file" id="fileuploadform" /><script type="text/javascript>var uploadformid = 'fileuploadform';var uploadform = document.getElementById(uploadformid);/* method to fetch and encode specific file here based on different browsers */</script>跨瀏覽器支持的幾個問題:var file = $j(fileUpload.toString()).attr('files')[0];fileBody = file.getAsDataURL(); // only works in Firefox另外,IE不支持:var file = $j(fileUpload.toString()).attr('files')[0];所以我必須替換為:var element = 'id';var element = document.getElementById(id);對于IE支持。這在Firefox,Chrome,Safari中有效(但不能正確編碼文件,或者至少在文件發布后無法正確顯示)var file = $j(fileUpload.toString()).attr('files')[0];var encoded = Btoa(file);也,file.readAsArrayBuffer() 似乎僅在HTML5中受支持?很多人建議: http : //www.webtoolkit.info/javascript-base64.html但這只會在base64編碼之前在UTF_8方法上返回en錯誤?(或空字符串)var encoded = Base64.encode(file); 
查看完整描述

3 回答

?
侃侃爾雅

TA貢獻1801條經驗 獲得超16個贊

我的解決辦法是使用readAsBinaryString()和btoa()它的結果。


uploadFileToServer(event) {

    var file = event.srcElement.files[0];

    console.log(file);

    var reader = new FileReader();

    reader.readAsBinaryString(file);


    reader.onload = function() {

        console.log(btoa(reader.result));

    };

    reader.onerror = function() {

        console.log('there are some problems');

    };

}


查看完整回答
反對 回復 2019-11-25
?
四季花海

TA貢獻1811條經驗 獲得超5個贊

單擊文件上傳按鈕時,我使用FileReader來顯示圖像,而不使用任何Ajax請求。以下是該代碼希望對您有所幫助的代碼。


$(document).ready(function($) {

    $.extend( true, jQuery.fn, {        

        imagePreview: function( options ){          

            var defaults = {};

            if( options ){

                $.extend( true, defaults, options );

            }

            $.each( this, function(){

                var $this = $( this );              

                $this.bind( 'change', function( evt ){


                    var files = evt.target.files; // FileList object

                    // Loop through the FileList and render image files as thumbnails.

                    for (var i = 0, f; f = files[i]; i++) {

                        // Only process image files.

                        if (!f.type.match('image.*')) {

                        continue;

                        }

                        var reader = new FileReader();

                        // Closure to capture the file information.

                        reader.onload = (function(theFile) {

                            return function(e) {

                                // Render thumbnail.

                                    $('#imageURL').attr('src',e.target.result);                         

                            };

                        })(f);

                        // Read in the image file as a data URL.

                        reader.readAsDataURL(f);

                    }


                });

            });

        }   

    });

    $( '#fileinput' ).imagePreview();

});


查看完整回答
反對 回復 2019-11-25
  • 3 回答
  • 0 關注
  • 819 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號