이 기사에서는 JS HTML5 다중 임시 업로드 및 참조에 대한 미리보기 예제의 예를 공유합니다. 특정 내용은 다음과 같습니다
주요 응용 프로그램
1. HTML5 파일은 여러 파일을 선택하고 여러 파일 정보를 얻을 수 있습니다.
2. xmlhttprequest 객체, HTTP 전송 요청을 보내십시오
3. 전송을 위해 각 파일을 FormData에 배치하십시오
4. ReadAsdataurl을 사용하여 이미지 컨텐츠를 URL로 직접 전환하고 IMG 태그의 SRC에 배치 한 다음 미리보기 가능한 그림을 생성합니다.
HTML+CSS+JS 코드
<! docType html> <head> <meta http-equiv = "content-type"content = "text/html"charset = "utf-8"/> <title> 테스트 html filereader </title> <style type = "text/css"> html, body, header, 바닥 글, div, ul, li, h1, h2, h3, h4, h5, h6, 레이블, 입력, textarea, p, span, {padding : 0; 여백 : 0;} img {border : 0;} em, strong {font-weight : normal; 글꼴 스타일 : Normal;} ul {List-Style : None;} H1, H2, H3, H4, H5, H6 {Font-Weight : Normal; font-size : 100%;} a, a : {text-decoration : none;}. photo_wrap {clear : 둘 다;}. photo_wrap li {margin : 10px; 너비 : 150px; float : 왼쪽;}. photo_box {높이 : 150px; 너비 : 150px; 오버플로 : 숨겨진; 위치 : 상대;}. photo_box .img1 {높이 : 150px;}. photo_box .img2 {width : 150px;}. upload_result {height : 50px;}. btn {위치 : 상대; 높이 : 40px; 너비 : 100px; float : 왼쪽;}. btn {높이 : 40px; 라인 높이 : 40px; 색상 : #fff; 디스플레이 : 블록; Border-Radius : 3px; 텍스트 정렬 : 센터; 배경색 : #FF5581; / * 오래된 브라우저 */ 배경 이미지 : -Moz-linear-gradient (상단, #fa7b9c 0%, #ff5581 100%); / * ff3.6+ */ background-image : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 컬러 스톱 (0%,#fa7b9c), 컬러 스톱 (100%,#ff5581)); / * Chrome, Safari4+ */ Background-Image : -webkit-linear-gradient (상단, #fa7b9c 0%, #ff5581 100%); / * chrome10+, safari5.1+ */ background-image : -o-linear-gradient (상단, #fa7b9c 0%, #ff5581 100%); / * 오페라 11.10+ */ 배경 이미지 : -ms-linear-gradient (상단, #fa7b9c 0%, #ff5581 100%); / * IE10+ */ BACK / * w3c */ 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#fa7b9c', endcolorstr = '#ff5581', gradientType = 0); / * IE6-8 */ Box-Shadow : 0 1PX 0 RGBA (255, 255, 255, 0.3) 삽입, 0 1PX 2PX RGBA (0, 0, 0, 0.3);}. BTN_ADD_PIC {width : 100px; 위치 : 절대; 상단 : 0; 왼쪽 : 0;}. btn_upload {너비 : 100px; 마진 : 0 10px 10px; float : 왼쪽;}. / * 오래된 브라우저 */ 배경 이미지 : -Moz-linear-gradient (상단, #fb99b1 0%, #ff5581 100%); / * ff3.6+ */ background-image : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, 컬러 스톱 (0%,#fb99b1), 컬러 스톱 (100%, ## ff5581)); / * Chrome, Safari4+ */ Background-Image : -webkit-linear-gradient (상단, #fb99b1 0%, #ff5581 100%); / * chrome10+, safari5.1+ */ background-image : -o-linear-gradient (상단, #fb99b1 0%, #ff5581 100%); / * 오페라 11.10+ */ 배경 이미지 : -ms-linear-gradient (상단, #fb99b1 0%, #ff5581 100%); / * IE10+ */ BACK / * w3c */ 필터 : progid : dximagetransform.microsoft.gradient (startColorstr = '#fb99b1', endColorstr = '#ff5581', gradientType = 0); / * ie6-8 */}. file_input_wrap {위치 : 절대; 상단 : 0; 왼쪽 : 0; 너비 : 100px; 높이 : 40px;}. file_input_wrap 레이블 {너비 : 100%; 높이 : 100%; 디스플레이 : 블록; 불투명도 : 0; 커서 : 포인터;}. file_input_wrap input {opacity : 0; 필터 : 알파 (불투명도 = 0);/*ie8 이하*/ 위치 : 절대; 상단 : 7px; 오른쪽 : 173px; 커서 : 포인터; 너비 : 95px;}. photo_box .icon_pos {높이 : 20px; 너비 : 20px; 디스플레이 : 블록; 위치 : 절대; 오른쪽 : 0; 하단 : 0;}. photo_box .loading {height : 10px; 디스플레이 : 블록; 위치 : 절대; 왼쪽 : 0; 하단 : 0; 배경-이미지 : url (loading.gif);}. sucess_icon {background-image : url (icons_01.png); 백그라운드 위치 : 0 0;}. ERROR_ICON {BACKERT-IMAGE : URL (icons_01.png); 배경 위치 : -20px 0;} </style> </head> </head> <body> <div> <a id = "j_add_pic"href = "javaScript :;"> 이미지 추가 </a> <div> <입력 유형 = "id ="id = "id ="inccept = "image/*"fileInfo (this) ""라벨 " id = "j_add_area"> </label> </div> </div> </div> <a id = "j_upload"href = "javaScript :;"> 시작 업로드 </a> <div id = "j_photo_wrap"> <ul> </ul> </div> </body> <script type = "text/javascript" src = "jquery-1.7.2.min.js"> </script> <script type = "text/javaScript"> var img_index = new Array (); 함수 upload_img () {var j = 0; img (); 함수 img () {// 1. xmlhttprequest 객체를 만듭니다. var xmlhttp; if (wind // 특정 특정 버전의 Mozillar 브라우저 버그에 대해 수정하십시오 (xmlhttp.overRidemImeType) {xmlhttp.overRidemImeType ( 'text/xml'); }; } else if (wind }; if (xmlhttp.upload) {// progress bar xmlhttp.upload.addeventlistener ( "progress", function (e) {if (e.lengthcomputable) {var load_percent = (e.loaded /e.total) * 100; $ ( '#j_photo_wrap ul li '). eq (j) .find ('. loading '). css ('width ', load_percent+'%'); // 2. 콜백 함수 // OnreadyStateChange는 ReadyState 속성이 xmlhttp.onreadystatechange = function (e)을 변경할 때마다 호출 된 이벤트 핸들 함수입니다. if (xmlhttp.readystate == 4) {if (xmlhttp.status == 200) { '(' + xmlhttp.responseteText + ')); if (json.status == 1) {$ ( '##j_photo_wrap ul li'). eq (j) .find ( '. upload_result'). text (singleimg.name+'업로드 완료'); $ ( '#j_photo_wrap ul li'). eq (j) .find ( '. loading'). hide (); $ ( '##j_photo_wrap ul li'). eq (j) .find ( '. icon_pos'). addClass ( 'sucess_icon'); } else {$ ( '##j_photo_wrap ul li'). eq (j) .find ( '. upload_result'). text (singleimg.name+'업로드 실패'); $ ( '#j_photo_wrap ul li'). eq (j) .find ( '. loading'). hide (); $ ( '##j_photo_wrap ul li'). eq (j) .find ( '. icon_pos'). addClass ( 'error_icon'); }} else {$ ( '#j_photo_wrap ul li'). eq (j) .find ( '. upload_result'). 텍스트 (singleimg.name+'업로드 실패'); $ ( '#j_photo_wrap ul li'). eq (j) .find ( '. loading'). hide (); $ ( '#j_photo_wrap ul li'). eq (j) .find ( '. loading'). hide (); $ ( '##j_photo_wrap ul li'). eq (j) .find ( '. icon_pos'). addClass ( 'error_icon'); } if (j <img_index.length -1) {j ++; img (); }}}}; // 3. 연결 정보를 설정 // HTTP 요청 매개 변수 초기화하지만 요청을 보내지 마십시오. // 첫 번째 매개 변수 연결 방법은, 두 번째 매개 변수는 URL 주소이고, 세 번째 True는 비동기 연결이며, 기본적으로 비동기식입니다. // post method xmlhttp.open ( "post", "upload.php", true를 사용하여 데이터를 보냅니다. // 4. 데이터 보내기, 서버와 상호 작용을 시작하십시오 // http 요청을 보내고, Open () 메소드에 전달 된 매개 변수를 사용하고 선택적 요청이 메소드로 전달되었습니다. true 인 경우, 문장 보내기가 즉시 실행됩니다. // 거짓 (동기) 인 경우, 서버 데이터가 다시 등장 한 후에 만 보내기가 실행됩니다. formdata.append ( "Filedata", SingleIMG); xmlhttp.send (formdata); } //}}}}; $ ( '#j_upload'). 클릭 (function () {upload_img ();}); $ ( '#j_add_area'). hover (function () {$ ( '#j_add_pic'). addClass ( 'btn_cur');}, function () {$ ( '#j_add_pic'). RemoveClass ( 'btn_cur');}; $ ( '#j_add_area'). click (function () {$ ( '#file'). click ();}); 함수 resize (img) {if (img.offsetheight> img.offsetwidth) {$ (img) .removeClass ( 'img1'). addClass ( 'img2'); } else {$ (img) .removeClass ( 'img2'). addClass ( 'img1'); }} 함수 fileInfo (source) {var irireg = /image//.*/i; var files = source.files; var 이름, 크기, 유형; for (var i = 0, f; f = 파일 [i]; i ++) {name = f.name; 크기 = F.size; 타입 = F.type; if (! type.match (IREG)) {$ ( '#j_photo_wrap ul'). Append ( '<li> <div>'+name+'는 이미지가 아닙니다. } else {img_index.push (f); if (size> 1048576) {$ ( '#j_photo_wrap ul'). Append ( '<li> <div>'+name+'는 미리보기 <span> </span> <span> </span> </div> </div> </li>')를 생성하기에는 너무 큽니다. } else {if (wind fr.onload = (function (f) {return function (e) {$ ( '#j_photo_wrap ul'). Append ( '<li> <liv> <img onload = "resize (this);"src = "'+this.result+'"/> <span> </span> <pan> </div> </li>} (}) fr.readasdataurl (f); }}}}}}}}; </script> </html>PHP는 파일 코드를 받았습니다 (여기서는 파일 이름, 유형 및 크기 만 가져 오며 다른 작업은 수행되지 않습니다)
<? php $ name = $ _files [ 'filedata'] [ 'name']; $ type = $ _files [ 'filedata'] [ 'type']; $ size = $ _files [ 'filedata'] [ 'size']; $ return = array ( "name"=> $ name, "type"=> $ type, "size"=> $ size, "status"=> 1); $ return = json_encode ($ return); echo $ return;?>
기존 문제
1. 썸네일을 생성하기 위해 readasdataurl은 파일 컨텐츠를 읽을 때 메모리를 사용하므로 큰 이미지로 인해 브라우저가 고착되거나 충돌하게됩니다.
2. 업로드는 분할에서 처리되지 않습니다
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.