Achten Sie bei der Implementierung eines einfachen Uploads mit HTML5+Javascript_Javascript-Kenntnissen auf Details-js-Tutorial-php.cn

Achten Sie bei der Implementierung eines einfachen Uploads mit HTML5+Javascript_Javascript-Kenntnissen auf Details

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 15:04:53

Original

2352 Leute haben es durchsucht

Notieren Sie kurz einige Fallstricke in einigen Codes, wenn Sie heute Morgen den H5-Upload durchführen

1. Anzeige

Da das Hochladen von Dateien im Frontend über das Formular erfolgen muss und Ajax nicht verwendet werden kann, sieht das Einfügen einer Eingabe vom Typ Datei in eine mobile Seite wirklich nicht sehr gut aus, wie unten gezeigt frustrierend, nicht wahr?

Ich habe nach einer Lösung gesucht, um diese Eingabe durch Flash zu ersetzen und dafür eine JQuery-Tool-Bibliothek wie uploadify zu verwenden. Die meisten Browser auf der mobilen Seite unterstützen Flash jedoch nicht. Die letzte Methode besteht also darin, das Formularformular zu verwenden. Setzen Sie einfach die Transparenz des Formulars und der Eingabe auf 0, sodass sie und der anzuzeigende Inhalt gleichzeitig in einem Div sind und der angezeigte Inhalt so gestaltet werden kann, dass er aussieht wie du willst. Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Wie im Bild gezeigt, wird es im p-Tag von „Bild hochladen“ angezeigt. Wenn Sie darauf klicken, wird die Datei ausgewählt

2. JS-Code

Was ich hier geschrieben habe, ist ganz einfach, ich habe nur die Grundfunktionen des h5-Uploads verwendet

Der HTML-Code lautet wie folgt. Was ich hier mache, ist, den Avatar hochzuladen und zu ändern. Das Namensattribut des Eingabe-Tags kann nicht weggelassen werden Back-End-Schnittstelle

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

Nach dem Login kopieren

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);
};

Nach dem Login kopieren

Details entscheiden über Erfolg oder Misserfolg, also nehmen Sie alles ernst.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.