입력유형="file" set base64 이미지 데이터

입력유형="file" set base64 이미지 데이터

나는 캔버스를 가지고 있고 그것으로부터 이미지 데이터를 검색합니다.canvas.toDataURL('image/png').

문제: <input type="file" />파일 경로:value기본 64 데이터 대신에.

질문:. 의 도움을 받아 base64 이미지 데이터를 서버로 보내는 방법<input type="file" />로컬 파일 시스템에 저장하지 않아도 됩니까?

내 해결 방법:숨겨진 입력 시도<input type="file" />, 하지만 서버는 파일 이름 속성을 필요로 합니다.

어쩌면 XmlHttpRequest로 이를 극복할 수 있을까요?

양식에 숨겨진 입력 요소를 만들기만 하면 됩니다.(유형 notice)

<input type="hidden" name="myHiddenField"> 

제출하기 전에 요소 값에 데이터를 첨부합니다.

var imageData = canvas.toDataURL('image/png');
document.getElementsByName("myHiddenField")[0].setAttribute("value", imageData);

갱신하다

서버가 제출된 데이터에 매개변수 "파일 이름"을 지정할 것을 요구할 경우, 해당 문자열을 서버의 이름으로 포함합니다.input요소.

<input type="hidden" name="filename"/>

이는 양식에 포함된 "파일 이름" 매개 변수를 포함하여 데이터를 제출하도록 속입니다.

사용하시려면XMLHttpRequest이에 대한 샘플은 다음과 같습니다.

//Prepare data to be sent
var imageData = canvas.toDataURL('image/png');
var params = "filename=" + imageData;

//Initiate the request
var httpRequest = new XMLHttpRequest();            
httpRequest.open('POST', 'test.php', true);

//Send proper headers
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.setRequestHeader("Content-length", params.length);
httpRequest.setRequestHeader("Connection", "close");

//Send your data
httpRequest.send(params);

FileReader를 사용할 수 있습니다. 예를 확인해 보십시오. https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

수용된 답변이 생성되지 않았고, 복사하기 쉬운 솔루션을 제공하는 것을 놓쳤기 때문에 @Yeldar Kurmangaliyev 코멘트를 탐색한 다음, 향후 방문자를 위한 작업 예시를 코딩했습니다.

<input type="file" name="images[]" id="images" accept="'image/png'" multiple="multiple" />
    
<script>
    //Function that converts a data64 png image to a Blob object
    function dataURItoBlob(dataURI){
        var binary=atob(dataURI.split(',')[1]);
        var array=[];
        for(i=0;i<binary.length;i++){
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)],{type:'image/png'});
    }

    //Function that inserts an array of File objects inside a input type file, because HTMLInputElement.files cannot be setted directly
    function FileListItems(file_objects){
        new_input=new ClipboardEvent("").clipboardData||new DataTransfer()
        for(i=0,size=file_objects.length;i<size;++i){
            new_input.items.add(file_objects[i]);
        }
        return new_input.files;
    }               

    //An image of a small square gray and white
    const data="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII";
    //Create a Blob object
    blob=(dataURItoBlob(data));
    //Use the Blob to create a File Object
    file=new File([blob],"img.png",{type:"image/png",lastModified:new Date().getTime()});
    //Putting the File object inside an array because my input is multiple
    array_images=[file]; //You can add more File objects if your input is multiple too
    //Modify the input content to be submited
    input_images=document.querySelector("input#images")
    input_images.files=new FileListItems(array_images);
</script>

언급URL : https://stackoverflow.com/questions/33297858/input-type-file-set-base64-image-data