머리말
오늘은 단일 또는 다중 이미지 업로드에 대해 이야기합니다. 요즘에는 Jquery의 verupload.js, jQuery File Upload, Uploadify, jQuery.filter 등과 같은 수많은 주요 이미지 업로드 플러그인이 있습니다. 하지만. 오늘은 위에서 언급한 플러그인에 대해서는 다루지 않겠습니다. HTML5에서 FileReader를 사용하여 단일 및 다중 이미지 미리보기, 삭제, 업로드 및 기타 기능을 구현하는 방법을 살펴보겠습니다. 구현 후 효과를 살펴보겠습니다.
2|0 구현 2|1 프런트엔드 부분이는 사용자가 클릭하는 버튼입니다. 가장 중요한 문장은 입력 유형=파일이며 여러 속성이 제공되어 여러 사진을 업로드해야 하는 요구 사항을 충족할 수 있습니다.
<div class=form-group form-row> <label class=col-sm-2 control-label uText>클럽 앨범</label><div class=row> <div class=col-xs-10 col-sm- 8 mTop5> <label <input type=file accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple> <img src=/Images/registerNewSite/btn_addimg.png class=addImg/> </label> </div> </div></div>
아래 영역은 이미지 미리보기에 사용됩니다.
<div class=form-group form-row id=preViewMore><div class=row> <div class=col-xs-9> <div id=clubInputImagePreview class=col-sm-9 img-preview img-preview-sm ></div> </div> </div></div>2|2 스타일 섹션
무엇? 스타일까지 봐야 인간적인지 알 수 있죠(쓴웃음)
2|3J 부분먼저 위의 HTML을 분석해 보겠습니다. 입력을 래핑하기 위해 레이블과 img 태그를 사용합니다. 렌더링에서 + 그림을 클릭하면 사진을 선택하는 대화 상자가 나타납니다. 먼저 라벨을 클릭하세요.
$(#btnClubImg).click(function() { //할 일});업로드된 파일을 가져오고 싶고 파일이 주로 입력에 있으므로 먼저 입력 태그를 가져오므로 다음을 살펴보겠습니다.
$(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input);//현재 요소 인쇄});현재 입력 요소 레이블을 인쇄하여 그것이 무엇인지 살펴보겠습니다.
첫 번째 항목을 확장하면 파일의 길이가 0임을 알 수 있습니다.
자, 입력 상자가 변경될 때 현재 선택된 파일을 얻을 수 있기를 원하기 때문에 분석을 계속하겠습니다. 간단히 말하면, 파일이 선택되면 현재 선택된 파일을 얻을 수 있습니다. 따라서 분석 후 입력 태그에 변경 이벤트를 추가해야 한다는 것을 알게 되었습니다.
$(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input); $input.on(change, function () { console.log(this);// 변경된 현재 요소를 인쇄합니다});});변경된 입력 요소 내부를 살펴보고 알아봅시다.
여기에서 마지막 수정 이벤트, 사진 이름, 크기 및 사진 유형을 포함하여 선택한 사진을 얻었음을 분명히 알 수 있습니다. (파일 유형을 보면 현재 사용자가 사진을 선택했는지 판단할 수 있죠? (눈을 가늘게 뜨고 웃는다) )) 다시 한 번 말하지만, 이는 단일 파일에 대한 것입니다. 파일이 여러 개라면 파일도 여러 개 있을 것입니다.
아래를 보면 입력 태그의 파일 요소에서 원하는 파일 정보를 얻었음을 인쇄물에서 볼 수 있습니다. 이를 얻으면 됩니다.
var 파일 = this.files; var 길이 = 파일 길이;
이런 식으로 모든 파일과 파일 수를 얻을 수 있습니다. 그러면 다음과 같은 질문이 나옵니다. 여러 파일을 선택하면 하나씩 출력하여 페이지에 표시하면 어떻게 될까요? 위에 표시된 네 단어를 보았을 때 두 단어가 떠올랐습니까? 주기
$.each(파일, 함수(키, 값) { //TOTO Something });위에서 얻은 파일을 반복하여 각 파일의 정보를 차례로 얻을 수 있습니다. 이렇게 하나씩 출력할 수 있을 뿐만 아니라 원하시면 천국으로 보내드릴 수도 있습니다~
var fileReader = new FileReader();//FileReader 객체 인스턴스화 var file_ = files[key];//현재 파일 가져오기 if (/^image///w+$/.test(file_.type)) {// 현재 파일에 대해 정규 매칭을 수행하여 선택한 이미지인지 확인합니다. fileReader.onload = function() {//읽기 작업이 완료되면 호출됩니다.} }FileReader의 지식 포인트를 확장해야 합니다.
FileReader는 주로 파일 내용을 메모리로 읽는 데 사용됩니다. 일련의 비동기 인터페이스를 통해 기본 스레드에서 로컬 파일에 액세스할 수 있습니다.
FileReader 개체를 사용하면 웹 응용 프로그램은 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있습니다. File 개체 또는 Blob 개체를 사용하여 처리할 파일이나 데이터를 지정할 수 있습니다.
주제로 돌아가서 파일을 가져오고 반환값을 얻을 수 있었으므로 지금은 반환된 결과만 표시하면 됩니다.
$(#clubInputImagePreview).css(background-image, url( + this.result + ));
this.result를 인쇄하여 그것이 무엇인지 확인해 봅시다:
이미지가 Base64 데이터 형식으로 변환된다는 것은 말할 필요도 없습니다. 마지막으로 readAsDataURL을 호출하여 파일 내용을 읽고 이를 data:url 문자열로 나타냅니다.
fileReader.readAsDataURL(value);
이렇게 하면 간단한 이미지 업로드 데모를 얻을 수 있지만, 아직 많은 비즈니스를 추가해야 하기 때문에 최종 단계는 아닙니다. 예를 들어, 미리보기 이미지를 얻은 후에는 현재 라벨이 사용됩니다. 다음에 루프를 실행하여 원본 라벨을 직접 사용하면 이전 이미지가 확실히 대체됩니다. 그러면 이는 확실히 우리가 원하는 효과가 아닙니다. 디스플레이를 교체하는 대신 순차적으로 표시할 수 있습니다. 따라서 여전히 몇 가지 처리가 필요합니다.
$(#clubInputImagePreview).css(Background-image, url( + this.result + ));//apend를 사용하여 현재 요소 아래에 하위 노드를 추가합니다. $(#clubInputImagePreview) .append(<img src='/Images /registerNewSite/btn_r_del.png' 클래스='clubsImage' id='ImgRemove' />);//현재 형제 노드에 형제 노드를 추가하려면 after를 사용하세요. $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img - 미리보기-sm delImg' ></div>);
그런 다음 삭제된 이미지를 추가할 때 현재 미리보기 영역이 사라지도록 클릭 이벤트도 제공해야 합니다.
$(#ImgRemove).click(function () { $(this).parent().remove();});결과적으로 우리가 원하는 결과가 아니라는 것을 알게 될 것입니다. 이는 현재 ID가 여전히 존재하기 때문에 다음 단계를 수행할 수 없기 때문입니다. 현재 요소의 ID를 제거한 다음 추가하면 됩니다. 동일한 ID를 가진 요소이므로 브라우저는 이것이 새로운 요소라고 생각합니다.
$input.removeAttr(id); var newInput ='<input type=file accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>'; $(this).append($(newInput));
최종 완전한 JS 코드는 다음과 같습니다.
var intP = 0; $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload);// console.log($input); $input.on(change, function () {// console.log(this); var files = this.files; var length = files.length; if (intP > 8) { layer.msg('더 이상 사진이 없습니다~', {}); return; } $.each(files, function (key, value) { var fileReader = new FileReader(); var file_ = files[key]; if (/^image///w+$/.test( file_.type)) { fileReader.onload = function() { if (intP > 8) { layer.msg('더 이상 사진이 없습니다~', {}) } if (key == 0 && intP == 0) { console.log(this.result); $(#clubInputImagePreview).css(배경 이미지, url( + this.result + )) $(#clubInputImagePreview) .append( <img src=' /Images/registerNewSite/btn_r_del.png' 클래스='clubsImage' id='ImgRemove' />); $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg'></div>) } else { $(#clubInputImagePreview +parseInt(intP) + ).css(배경 이미지, url( + this.result + )); $(#clubInputImagePreview +parseInt(intP) + ).append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove +parseInt( 1) +parseInt(intP)) +' />); $(#clubInputImagePreview +parseInt(intP) + ).after(<div id='clubInputImagePreview +parseInt(parseInt(1) +parseInt(intP)) + 'class='col-sm-9 img-preview img-preview- sm delImg' ></div>) } if (key == 0 && intP == 0) { $(#ImgRemove).click(function () { $(this).parent().remove(); }); } else { $(#ImgRemove +parseInt(parseInt(1) +parseInt(intP)) + ) .click(function () { $(this).parent().remove(); }) } intP += parsInt(1) }; fileReader.readAsDataURL(value); } else { layer.msg(형식 오류<br/>이미지 파일을 선택하세요.) } }) }); 파일 수락=이미지/* 이름=ClubImagesUpload id=ClubImagesUpload 클래스=숨기기 다중=다중>'; $(this).append($(newInput)) }); 요약위는 편집자가 소개한 단일 및 다중 이미지 업로드 기능의 HTML5 구현입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 제 시간에 답변해 드리겠습니다.