Probleme und Lösungen bei der Implementierung des einfachen Bild-Uploads in HTML5-HTML-Tutorial-php.cn

Probleme und Lösungen bei der Implementierung des einfachen Bild-Uploads in HTML5

不言

Freigeben： 2018-05-08 15:58:00

Original

1874 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zu den Problemen und Lösungen vorgestellt, die bei der Implementierung des einfachen Bild-Uploads in HTML5 auftreten. 1. Anzeige
Da das Hochladen von Dateien im Frontend erfolgt Durch das Formularformular kann Ajax nicht verwendet werden. In diesem Fall sieht das Einfügen einer Datei vom Typ „Datei“ nicht sehr gut aus, wie unten gezeigt, es ist sehr frustrierend

Ich habe nach einer Lösung gesucht, um diese Eingabe durch Flash zu ersetzen und die JQuery-Tool-Bibliothek wie uploadify zu verwenden. Allerdings unterstützen die meisten Browser auf der mobilen Seite kein Flash. 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 p sind und der angezeigte Inhalt so aussehen kann du willst. Der Code lautet wie folgt:

Code kopieren

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> 
p{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> 
<p class="logo"> 
<img src="img/1.jpg" /> 
</p> 
<p class="upload"> 
<p>上传图片</p> 
<form> 
<input type="file" /> 
</form> 
</p> 
</body> 
</html>

Nach dem Login kopieren

Es sieht aus wie im Bild oben. Es wird im p-Tag von „Bild hochladen“ angezeigt . JS-Code

Ich habe das. Das Schreiben ist ganz einfach, ich verwende nur die Grundfunktion des h5-Uploads

Der HTML-Code ist wie folgt, die Aktion ist der anzufordernde Pfad, was ich hier mache Um den Avatar und das Eingabe-Tag hochzuladen und zu ändern, wenn sich die Datei ändert, kann das Namensattribut nicht weggelassen werden, es bezieht sich speziell auf die Backend-Schnittstelle

Kopieren Sie den Code

Der Code lautet wie folgt:

<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(&#39;imageFile&#39;).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(&#39;uploadForm&#39;)), //建立请求和数据 
oXHR = new XMLHttpRequest(); 
oXHR.addEventListener(&#39;load&#39;, function(resUpload) { 
//成功 
}, false); 
oXHR.addEventListener(&#39;error&#39;, function() { 
//失败 
}, false); 
oXHR.addEventListener(&#39;abort&#39;, function() { 
//上传中断 
}, false); 
oXHR.open(&#39;POST&#39;, actionUrl); 
oXHR.send(vFD); 
};

Nach dem Login kopieren

Der obige Inhalt hat Ihnen das relevante Wissen über die Probleme und Lösungen vermittelt, die bei der Implementierung des einfachen Bild-Uploads in HTML5 auftreten. Ich hoffe, dass dies der Fall ist allen hilfreich sein. Verwandte Empfehlungen:

Html5 ermöglicht das Scannen und Parsen von QR-Codes

HTML5 ermöglicht die Weitergabe an den WeChat-Freundeskreis QQ Freunde QQ-Bereich Weibo QR Codefunktion

Das obige ist der detaillierte Inhalt vonProbleme und Lösungen bei der Implementierung des einfachen Bild-Uploads in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!