HTML5의 새로운 기능을 활용하여 이미지 파일의 비동기 업로드 달성_html5 튜토리얼 기술

HTML5의 새로운 기능을 사용하여 비동기적으로 파일을 업로드하는 것은 매우 간단하고 편리합니다. 이 기사에서는 주로 JS 부분과 html 구조를 보여줍니다. 아래 코드는 타사 라이브러리를 사용하지 않습니다. 참조가 있는 경우 표시되지 않은 일부 코드 조각에 주의하세요. 내측 효과 미리보기:

1. 파일이 선택되지 않음 2. 파일이 선택됨


HTML 코드 부분:

아이디어: 아래 코드에서는 CSS의 z-index 속성을 사용하여 id=btnSelect 요소 아래에 input="file” 태그를 숨겼습니다. a 태그를 클릭하면 파일 선택 상자가 나타납니다. 아래의 마스크 레이어는 확인 버튼을 클릭하는 데 사용됩니다. >코드는 다음과 같습니다.

업로드할 사진을 선택하려면 클릭하세요.

업로드 확인

사진을 업로드하는 중입니다. ..

JS 이미지 파일 확인 부분:

확인 부분은 크기, 선택 여부, 파일 유형은 세 부분으로 구성됩니다. 첫 번째 createObject 메소드는 로컬 이미지 파일의 미리보기 경로를 생성하는 것입니다. , 비어 있는지 확인하고, 파일 형식과 파일 크기를 확인합니다. 조건이 충족되지 않으면

false가 반환됩니다. 위의 세 가지 조건이 충족되면 조건을 충족한 후 이미지 미리보기를 생성합니다. dom에 img 요소를 추가한 다음 createObjectURL() 메서드를 사용하여 미리보기 경로를 얻습니다.

코드 복사



코드는 다음과 같습니다.


//데이터의 URL 주소 가져오기
function createObjectURL(blob) {
if (window.URL) {

return window.URL.createObjectURL(blob);

} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(blob); {

return null;

} } //파일 감지function checkFile() { //파일 가져오기

var file = $$( "uploadFile") .files[0];

//파일이 비어 있는지 판단

if (file === null || file === undefine) {

alert("업로드할 파일을 선택하세요. 문서! ");
$$("btnSelect").innerHTML = "업로드할 사진을 선택하려면 클릭하세요.";
false를 반환합니다.
}
//파일 형식 감지
if(file .type.indexOf('image') === -1) {
alert("이미지 파일을 선택하세요!")
return false;
}
//파일 크기 계산
var size = Math.floor(file.size/1024);
if (size > 5000) {
alert("업로드된 파일은 5M를 초과할 수 없습니다!")
return false;

//미리보기 이미지 추가
$$("btnSelect").innerHTML = "";
};



JS Ajax 요청 부분:

설명: 첫 번째 리스너는 확인 조건이 충족된 후 파일 선택 변경 이벤트입니다. 두 번째 이벤트 리스너는 btnSelect를 클릭했을 때 나타나는 팝업 창의 응답을 듣는 것입니다. 다음은 Ajax 요청 전송을 시작하기 위한 업로드 확인 버튼의 이벤트 모니터링입니다. XMLHttpRequest 객체. addEventListener() 메서드를 포함하여 코드를 게시하지 않았습니다. 이 두 부분은 다른 기사를 참조할 수 있습니다.

코드 복사
//이미지 URL 주소 변경 수신
addEventListener($$("uploadFile"), "change", function() {
checkFile();
} );//파일 선택 버튼 클릭 듣기
addEventListener($$("btnSelect"), "click", function() {
//파일 선택 상자 팝업
$$(" uploadFile").click()
})
//업로드 확인 버튼 클릭 이벤트 듣기
addEventListener($$("btnConfirm"), "click", function(e) {
if (checkFile()) {
try {
//업로드 작업 수행 var xhr = createXHR()
$$("maskLayer").style.display = "차단";
xhr.open("post","/uploadPhoto.action", true)
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); .onreadystatechange = function() {
if (xhr.readyState == 4) {
var flag = xhr.responseText;
if (flag == "success") {
alert("Image 성공적으로 업로드되었습니다!");
} else {
alert("이미지가 성공적으로 업로드되었습니다!");
};
$$("maskLayer").style.display = "none";
};
} ;
//양식 데이터
var fd = new FormData()
fd.append("myPhoto", $$("uploadFile").files[0] );
//실행 보내기
xhr.send(fd)
} catch (e) {
console.log(e)
}
} );



위 내용은 모두 주요 코드 부분입니다. 궁금한 점이 있으면 연락주세요.