집 >웹 프론트엔드 >JS 튜토리얼 >html5+javascript_javascript 기술로 단순 업로드를 구현할 때 세부 사항에 주의하세요.

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

WBOY원래의: 2016-05-16 15:04:532316검색

오늘 아침 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);
};

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

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

성명：

이전 기사：JavaScript_javascript 기술의 브라우저 호환성 문제에 대한 간략한 분석다음 기사：JavaScript_javascript 기술의 브라우저 호환성 문제에 대한 간략한 분석

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

관련 기사