오늘 아침 H5를 업로드하는 일부 코드에 대한 간단한 기록과 여전히 함정이 있습니다.
1. 디스플레이
프론트 엔드 업로드 파일은 양식 양식을 통과해야하며 AJAX를 사용할 수 없습니다. 이런 식으로, 모바일 페이지에 입력 파일을 입력하는 것은 실제로 좋지 않습니다. 아래 그림에서 볼 수 있듯이 매우 실망 스럽습니까?
솔루션을 찾은 후 일부 PC는 업로드와 같은 jQuery 도구 라이브러리를 사용 하여이 입력을 플래시로 교체했지만 대부분의 모바일 브라우저는 플래시를 지원하지 않습니다. 따라서 최종 방법은 양식을 사용하고 양식의 투명성을 설정하고 입력을 0으로 설정하는 것입니다. 이들이 표시 될 내용이 표시되도록 DIV에있게되며 원하는대로 표시되는 내용을 만들 수 있습니다. 코드는 다음과 같습니다.
<! docType html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport"content = "width = device-width, 초기 스케일 = 1.0, 사용자-스케일 가능 = no"> <title> </title> <style> width : 100%;}. 여백 : 0 Auto;} .upload {위치 : 상대; 너비; 너비 : 80px; 높이 : 18px; 선-높이 : 18px; 배경 : #2fc7c9; 텍스트-정렬 : 중심; 색상 : #fff; 패딩 : 0px 5px; -webkit-border-radius : 2px; Border-Radius : 2px; 여백 : 0 Auto; } .upload form {너비 : 100%; 위치 : 절대; 왼쪽 : 0; 상단 : 0; 불투명도 : 0; 필터 : Alpha (incacity = 0);} .upload form 입력 {width : 100%;} </style> </head> <body> <div> <img src = "img/1.jpg"/> </div> <div> <p> 업로드 이미지 </p> <form> <input type = "file> </html> </html> </html> </html> </html> </html모양은 그림과 같이 표시되므로 P- 태그 "업로드 사진"에 표시됩니다. 클릭하면 파일을 선택하는 효과가 생깁니다.
2. JS 코드
H5 업로드의 기본 기능 만 사용하여 아주 간단하게 썼습니다.
HTML 코드는 다음과 같습니다. 조치는 요청 경로입니다. 내가 여기서하는 일은 파일이 변경 될 때 아바타를 업로드하고 수정하는 것입니다. 입력 태그의 이름 속성을 생략 할 수 없으며 백엔드 인터페이스와 관련이 있습니다.
<form id = "uploadform"enctipe = "multipart/form-data"method = "post"action = "xxxxxx"> <input type = "file"name = "im
var imaxfilesize = 2097152; //2mwindow.FileSelected = function () {var of of olode.getElementById ( 'ImageFile'). 파일 [0]; // 파일을 읽습니다 var rfilter =/^(im if (! rfilter.test (ofile.type)) {alert ( "파일 형식은 이미지 여야합니다"); 반품; } if (ofile.size> imaxfilesize) {alert ( "이미지 크기가 2m를 초과 할 수 없음"); 반품; } var vfd = new FormData (document.getElementById ( 'uploadform')), // 요청 및 데이터 생성 oxhr = new xmlhttprequest (); oxhr.addeventListener ( 'load', function (resupload) {// success}, false); oxhr.addeventListener ( 'error', function () {// 실패}, false); oxhr.addeventListener ( 'Abort', function () {// upload interprup}, false); oxhr.open ( 'post', actionurl); Oxhr.Send (VFD);};세부 사항은 성공 또는 실패를 결정하므로 모든 것을 진지하게 받아 들여야합니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.