HTML5는 여러 이미지 업로드 기능을 구현합니다._html5 튜토리얼 기술

이전에 이미지 업로드에 대해 글을 쓴 적이 있지만, 최근 여러 장의 업로드가 필요한 업무상 요구사항이 있어서 다시 작성하게 되었습니다

HTML 구조:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <div class="컨테이너" >
2.  <라벨>이미지 파일을 선택하세요: 라벨>
3.  <입력 유형="파일" id="file_input" 다중/>
4. div>

그런데 이번 업로드의 주요 논리에 대해 이야기해 보겠습니다.

·입력 태그를 사용하고 type=file을 선택하세요. 여러 개를 가져와야 합니다. 그렇지 않으면 단일 이미지만 선택할 수 있습니다.

·입력의 변경시간을 바인딩

·핵심은 이 변경 이벤트를 처리하는 방법입니다. H5의 새로운 FileReader 인터페이스를 사용하여 파일을 읽고 이를 base64로 인코딩합니다. 다음은 백엔드 급우들과 상호 작용하는 것입니다.

JS 코드:

JavaScript 코드클립보드에 콘텐츠 복사

1. window.onload = function(){   
2.         var input = document.getElementById("file_input");   
3.         var result,div;   
4.     
5.         if(typeof FileReader==='undefined'){   
6.             result.innerHTML = "抱歉，你的浏览器不支持 FileReader";   
7.             input.setAttribute('disabled','disabled');   
8.         }else{   
9.             input.addEventListener('change',readFile,false);   
10.         }
    　　　　　//handler   
11.         function readFile(){   
12.             for(var i=0;i<this.files.length;i++){   
13.                 if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式   
14.                     return alert("上传的图片格式不正确，请重新选择")
    　　　　　　　　　　}   
15.                 var reader = new FileReader();   
16.                 reader.readAsDataURL(this.files[i]);   
17.                 reader.onload = function(e){   
18.                     result = '
    this.result+'" alt=""/>
    '
19. div = document.createElement('div')
20. div.innerHTML = 결과
21. document.getElementById('body').appendChild(div) //dom 트리 삽입
    　　　　　 }
22.                                                     
                                                       
23. }
사진 여러장 올리는 방법인가요 0.0

하지만 그렇지 않습니다. 이미지를 base64 인코딩으로 변환한 다음 새로 고침하면 아무것도 표시되지 않습니다.

이미지 삽입 후 개발자 도구를 열어서 html 구조가 이런지 확인하세요

현실적인 접근 방식은 처리 기능에서 파일 대기열의 파일을 백엔드로 보내는 것입니다. 백엔드 학생들은 MD5 암호화된 파일과 파일에 해당하는 경로를 프런트 엔드에 반환하고 프런트 엔드는 이 경로를 사용합니다. 이를 상위 페이지로 렌더링합니다.

그 후 MD5 파일은 백엔드로 다시 전송됩니다. 왜냐하면 프런트엔드는 일반적으로 업로드 후 사진을 삭제하기 때문입니다. 반환의 목적은 해당 사진이 우리가 원하는 것인지 백엔드에 알리고 백엔드에 저장하는 것입니다. 데이터베이스에 있습니다.

jquery와 상호작용하는 방법을 알려주세요

JavaScript 코드

클립보드에 콘텐츠 복사

1. 함수 readFile(){   
2.             var fd = new FormData();   
3.             for(var i=0;i<이것.files.length;i ){   
4.                var reader = new FileReader();   
5.                reader.readAsDataURL(this.files[i]);   
6.                fd.append(i,this.files[i]);
   　　　　　　　　　 }   
7.                 $.ajax({   
8.                    URL : '',   
9.                    유형 : '게시물',   
10.                    데이터 : fd,   
11.                    성공 : 기능(데이터){   
12.                        console.log(데이터)   
13.                  　}    
14.                 })   
15. }      

FormData는 H5의 새로운 기능을 사용하여 새로운 기능을 사용하고 있습니다.

저희는 성공적인 성공을 거두었습니다. 우리는 이전에 좋은 방법을 찾고 있습니다.

上个效果图：

以上就是本文의 전체 부서는 内容, 希望对大家의 학교입니다.

원문:http://www.cnblogs.com/weapon-x/p/5237064.html