suchen

Heim  >  Artikel  >  Web-Frontend  >  Achten Sie bei der Implementierung eines einfachen Uploads mit HTML5+Javascript_Javascript-Kenntnissen auf Details

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

WBOY
WBOYOriginal
2016-05-16 15:04:532291Durchsuche

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Analyse von Browserkompatibilitätsproblemen in JavaScript_Javascript-KenntnissenNächster Artikel：Eine kurze Analyse von Browserkompatibilitätsproblemen in JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen