html5+javascript_javascript 기술로 단순 업로드를 구현할 때 세부 사항에 주의하세요.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

html5+javascript_javascript 기술로 단순 업로드를 구현할 때 세부 사항에 주의하세요.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:04 PM

html5 javascript 업로드

오늘 아침 H5 업로드 시 일부 코드의 함정을 간략히 기록해 보세요

1. 디스플레이

프론트엔드 업로드 파일은 반드시 폼을 거쳐야 하는데, Ajax를 사용할 수 없기 때문에 이 경우 아래와 같이 파일 형식의 입력을 모바일 페이지에 넣는 것은 정말 보기 좋지 않습니다. 답답하지 않나요?

해결책을 찾았습니다. PC에서 일부 사람들은 이 입력을 플래시로 대체하고 uploadify와 같은 jquery 도구 라이브러리를 사용합니다. 그러나 모바일 측의 대부분의 브라우저는 플래시를 지원하지 않습니다. 그래서 마지막 방법은 form form을 사용하는 것입니다. form의 투명도를 설정하고 입력을 0으로 설정하면 표시할 내용과 표시할 내용이 동시에 div에 있고 표시되는 내용이 보이도록 할 수 있습니다. 당신이 원하는대로. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <title></title>
  <style>
   div{width: 100%;}
   .logo img{display:block; margin:0 auto;}
   .upload{position: relative;width: 80px;height: 18px;line-height: 18px;background: #2fc7c9;text-align: center;
     color: #FFF;padding: 0px 5px;-webkit-border-radius: 2px;border-radius: 2px;
     margin: 0 auto;
     }
   .upload form{width:100%;position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);}
   .upload form input{width: 100%;}
  </style>
 </head>
 <body>
  <div class="logo">
   <img src="img/1.jpg" />
  </div>
  <div class="upload">
   <p>上传图片</p>
   <form>
    <input type="file" />
   </form>
  </div>
 </body>
</html>

로그인 후 복사

사진과 같이 "이미지 업로드"의 p 태그에 표시됩니다. 클릭하면 파일을 선택하는 효과가 나타납니다

2. JS 코드

여기에 쓴 내용은 아주 간단합니다. h5 업로드의 기본 기능을 사용했을 뿐입니다

html 코드는 다음과 같습니다. 액션이 요청되는 경로입니다. 여기서 하는 일은 파일 변경 시 아바타를 업로드하고 수정하는 것입니다. 특히 입력 태그의 이름 속성은 생략할 수 없습니다. 백엔드 인터페이스

<form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX">
  <input type="file" name="imageFile" id="imageFile" onchange="fileSelected()" />
</form>

로그인 후 복사

var iMaxFilesize = 2097152; //2M
window.fileSelected = function() {
 var oFile = document.getElementById('imageFile').files[0]; //读取文件
 var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
 if (!rFilter.test(oFile.type)) {
  alert("文件格式必须为图片");
  return;
 }
 if (oFile.size > iMaxFilesize) {
  alert("图片大小不能超过2M");
  return;
 }
 var vFD = new FormData(document.getElementById('uploadForm')), //建立请求和数据
  oXHR = new XMLHttpRequest();
 oXHR.addEventListener('load', function(resUpload) {
  //成功
 }, false);
 oXHR.addEventListener('error', function() {
  //失败
 }, false);
 oXHR.addEventListener('abort', function() {
  //上传中断
 }, false);
 oXHR.open('POST', actionUrl);
 oXHR.send(vFD);
};

로그인 후 복사

세부사항에 따라 성공과 실패가 결정되므로 모든 것을 진지하게 받아들이세요.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.