javascript - html5 여러 이미지 업로드
習慣沉默
習慣沉默 2017-05-16 13:02:56
0
3
513

jquery에 여러 이미지를 업로드한 데모를 다운로드한 방법입니다. 그러나 나는 그의 구현 아이디어를 이해하지 못합니다.
< br>제가 알고 싶은 가장 중요한 점은 그가 페이지에 사진을 업로드한 다음 클릭하여 업로드를 시작한 다음 모든 사진을 한 번에 업로드하는 방법입니다.

이 데모의 온라인 데모 링크는 http://www.jq22.com/yanshi1604입니다.

習慣沉默
習慣沉默

모든 응답(3)
刘奇

제 생각에는:

  1. 파일 속성의 입력 태그로 파일을 선택할 수 있습니다.

  2. 파일을 선택한 후 파일의 마지막 수정 시간, 파일 이름, 파일 크기, 파일 형식 등의 정보가 포함된 input의 files 속성을 통해 FileList 개체에 액세스합니다. 여기에서 전송되는 파일의 크기를 제한할 수 있습니다. 위의 데모에서는 동일한 파일이 업로드되는 것을 방지하기 위해 파일 이름 비교를 사용해야 합니다.

  3. FileReader 개체의 readAsDataURL() 메서드를 사용하여 이미지에 해당하는 base64 인코딩을 얻은 다음 src 속성 값을 이 base64로 사용하여 상자에 img 요소를 생성하여 이미지 미리보기 기능을 구현합니다.

  4. 업로드 버튼을 클릭하고 AJAX를 통해 백그라운드에 업로드하세요.

더 완전한 요약을 보려면 이 기사를 읽어보세요. 조금 더 간단하게 요약하자면 제가 요약한 노트를 보시면 됩니다.

滿天的星座

사진이 여러 개인 경우 요소를 배열에 넣고 함께 전달하세요

阿神

배열에 넣고 파일을 사용하여 함께 전달하기만 하면 됩니다

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿