Problèmes et solutions rencontrés lors de la mise en œuvre du téléchargement simple d'images en HTML5-tutoriel HTML-php.cn

Problèmes et solutions rencontrés lors de la mise en œuvre du téléchargement simple d'images en HTML5

不言

Libérer： 2018-05-08 15:58:00

original

1881 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes sur les problèmes et les solutions rencontrés lors de la mise en œuvre du téléchargement simple d'images en HTML5. Les amis dans le besoin peuvent s'y référer 1. Afficher
Parce que le téléchargement de fichiers sur le front-end est un problème. nécessaire Grâce au formulaire, ajax ne peut pas être utilisé. Dans ce cas, mettre une entrée de type fichier dans une page mobile n'a vraiment pas l'air très bien, comme indiqué ci-dessous, c'est très frustrant

J'ai cherché une solution. Certaines personnes sur PC remplacent cette entrée par Flash et utilisent la bibliothèque d'outils jquery telle que uploadify pour le faire. Cependant, la plupart des navigateurs mobiles ne prennent pas en charge Flash. Donc, la méthode finale consiste à utiliser le formulaire de formulaire, il suffit de définir la transparence du formulaire et de l'entrée sur 0, de sorte qu'ils et le contenu à afficher soient dans un p en même temps, et que le contenu affiché puisse ressembler à tu veux. Le code est le suivant :

Copiez le code

Le code est le suivant :

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

Copier après la connexion

ressemble à l'image ci-dessus, elle est donc affichée dans la balise p de "Télécharger l'image". > 2. Code JS

Ce que j'ai écrit ici est assez simple, j'ai juste utilisé la fonction de base de h5 upload Le code html est le suivant, l'action est le chemin à demander, ce que je fais ici consiste à télécharger et modifier l'avatar lorsque le fichier change, saisir L'attribut name de la balise ne peut pas être omis, il est spécifiquement lié à l'interface backend

Copiez le code

Le code est le suivant :

Le contenu ci-dessus a partagé avec vous les connaissances pertinentes sur les problèmes et les solutions rencontrés lors de la mise en œuvre du téléchargement simple d'images en HTML5. J'espère que cela sera utile à tout le monde.

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

Copier après la connexion

Recommandations associées :

Html5 réalise la numérisation et l'analyse du code QR

HTML5 réalise le partage avec le cercle d'amis WeChat Amis QQ Espace QQ Weibo QR fonction de code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!