[javascript] 입력 양식에서 Base64 인코딩 파일 데이터 가져 오기

Firebug에서 조사중인 약간의 정보를 얻을 수있는 기본 HTML 양식이 있습니다.

내 유일한 문제는 데이터베이스에 저장하기 위해 해당 형식으로 있어야하는 서버로 전송되기 전에 파일 데이터 를 base64로 인코딩 하려고한다는 것 입니다.

<input type="file" id="fileupload" />

그리고 Javascript + jQuery에서 :

var file = $('#fileupload').attr("files")[0];

사용 가능한 자바 스크립트를 기반으로 몇 가지 작업이 있습니다. .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 would 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 메서드에서 오류 만 반환합니까? (또는 빈 문자열)

var encoded = Base64.encode(file); 

답변

function uint8ToString(buf) {
    var i, length, out = '';
    for (i = 0, length = buf.length; i < length; i += 1) {
        out += String.fromCharCode(buf[i]);
    }
    return out;
}

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');
    };
}

$(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();
});

const fileToBase64 = async (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (e) => reject(e)
  })

const file = event.srcElement.files[0];
const imageStr = await fileToBase64(file)