js를 통해 업로드된 이미지 정보(임시 저장 경로, 이름, 크기)를 얻은 후 ajax_javascript 기술을 통해 백엔드로 전달하는 방법

프로젝트 요구 사항: 업로드된 이미지 정보(임시 저장 경로, 이름, 크기)를 js를 통해 얻은 후 ajax를 통해 백엔드로 전달하는 방법

주제는 jquery를 사용하여

를 수신합니다.

<input name="c_pic" id="c_pic" type="file" class="file">

사용된 방법은 다음과 같습니다.

var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);
function readFile(){ 
var file = this.files[0]; 
}

주체가 업로드한 이미지의 관련 정보를 백엔드에 전송하기 위해 ajax post 방식을 사용하려고 하는데, 수신된 파일이 object 파일인데 post를 사용하여 전송할 수 있는 데이터 형식으로 변환하려면 어떻게 해야 합니까?

이 주제를 보고 쉽지 않다는 생각이 들었습니다. JSON.stringify(file)을 통해 직접 파일을 전달했습니다. (참고: stringify()는 객체에서 문자열을 구문 분석하는 데 사용됩니다.) :

var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);

function readFile(){ 
var file = this.files[0];
var file_json = JSON.stringify(file);
console.log(file_json); //打印出来是: {}
$.post('',file_json);
}

인쇄된 항목이 빈 개체인 것을 발견했습니다. {}에 대해 알고 계시면 알려주시면 감사하겠습니다!

그래서 마음을 바꿔서 uploadfile 플러그인이나 Baidu의 webuploader를 사용했습니다. jQuery File Upload는 다중 파일 업로드, 취소, 삭제, 업로드 전 썸네일 미리보기, 이미지 크기 목록 표시, 업로드 지원. 진행률 표시줄은 다양한 동적 언어로 서버측 개발을 지원합니다.
html5를 지원하는 경우 FormData Ajax를 사용하여 업로드할 수 있습니다.

위 내용은 업로드된 이미지 정보(임시 저장 경로, 이름, 크기)를 js를 통해 얻은 후 ajax를 통해 백엔드에 전달하기 위해 편집자가 공유한 방법입니다. 모두에게 도움이 되길 바랍니다.