JavaScript avancé (8) JS implémente les fonctions de prévisualisation d'image et de serveur d'importation

黄舟

Libérer： 2017-03-23 16:13:52

original

1788 Les gens l'ont consulté

JS implémente la fonction d'importation de fichiers

Pendant le processus de développement du projet, la fonction de téléchargement de fichiers doit être implémentée. Profitez de cette occasion pour l’apprendre.

Cette fonctionnalité peut être prise en charge en utilisant le type d'entrée existant "fichier" en HTML. Comme indiqué ci-dessous :

& lt; input ng-model = "url" id = "url" type = "file"/& gt; 🎜>

accepter la liste d'attributs

1.accept= " application/msexcel" 2.accept="application/msword"

3.accept="application/pdf"

4.accept="application/poscript"

5.accept="application/rtf"

6.accept="application/x-zip-compressed"

7.accept="audio/basic"

8.accept="audio/x-aiff"

9.accept="audio/x-mpeg"

10.accept="audio/x-pn/ realaudio "

11.accept="audio/x-waw"

12.accept="image/gif"

13.accept="image/jpeg"

14.accept="image/tiff"

15.accept="image/x-ms-bmp"

16.accept="image/x-photo- cd "

17.accept="image/x-png"

18.accept="image/x-portablebitmap"

19.accept="image/x - portable-greymap"

20.accept="image/x-portable-pixmap"

21.accept="image/x-rgb"

22.accept = "text/html"

23.accept="text/plain"

24.accept="video/quicktime"

25.accept="video/x - mpeg2"

26.accept="video/x-msvideo"

La question suivante est : comment obtenir le chemin de téléchargement du fichier afin que les opérations ultérieures de lecture et d'écriture du fichier puissent être effectué.

Ce qui suit est une démo pour le téléchargement et l'aperçu des images :

<!doctype html> 
<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
<title>Image preview example</title> 
<script type="text/javascript"> 
var loadImageFile = (function () { 
if (window.FileReader) { 
var oPreviewImg = null, oFReader = new window.FileReader(), 
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\
/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\
/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 
 
oFReader.onload = function (oFREvent) { 
if (!oPreviewImg) { 
var newPreview = document.getElementById("imagePreview"); 
oPreviewImg = new Image(); 
oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px"; 
oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px"; 
newPreview.appendChild(oPreviewImg); 
} 
oPreviewImg.src = oFREvent.target.result; 
arr = oPreviewImg.src.toString().split(",");
alert(arr[0]);
alert(arr[1]);
}; 
 
return function () { 
var aFiles = document.getElementById("imageInput").files; 
if (aFiles.length === 0) { return; } 
if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; } 
oFReader.readAsDataURL(aFiles[0]); 
} 
} 
if (navigator.appName === "Microsoft Internet Explorer") { 
return function () { 
alert(document.getElementById("imageInput").value); 
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value; 
} 
} 
})(); 
</script> 
<style type="text/css"> 
#imagePreview { 
width: 160px; 
height: 120px; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
</style> 
</head> 
<body> 
<p id="imagePreview"> 
</p> 
<form name="uploadForm"> 
<p> 
<input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br /> 
<input type="submit" value="Send" /></p> 
</form> 
</body> 
</html>

Copier après la connexion

Test

Si vous réussissez le test, vous pouvez obtenir le format du fichier. La méthode d'encodage et le contenu d'encodage sont les suivants :

Compréhension

En lisant le code, vous pouvez obtenir le format et la méthode d’encodage de l’image. L'étape suivante consiste à transférer les fichiers.

Après deux jours d'humiliation, de réticence et de lutte douloureuse, je me suis finalement levé avec ténacité.

Je suis retourné au dortoir la nuit et j'ai continué à lutter, et lentement mes pensées sont devenues claires : après avoir obtenu le format d'encodage Base64 de l'image, j'ai pensé au code de transfert de fichier que j'avais écrit auparavant. J'ai écrit quelques opérations de base sur les fichiers. À partir de là, j’imagine qu’il devrait être possible d’utiliser ici la méthode de transfert de fichiers la plus primitive.

Rendez-vous au laboratoire le matin et essayez de transmettre l'encodage Base64 de l'image au serveur Une fois que le serveur a reçu l'encodage Base64 transmis par le client, il utilise la boîte à outils Base64Img (cliquez pour télécharger la boîte à outils). ) pour convertir le Base64 Convertissez l'encodage de l'image au format d'image et enregistrez-le à l'emplacement spécifié. Au premier essai, il n’y a aucun problème pour enregistrer les fichiers image localement. Après avoir modifié quelques détails mineurs, le programme a été déployé sur le serveur Alibaba Cloud. Après test, SUCCÈS !

Core code

html

javaScript

<. 🎜>

<p style="padding-top: 15px">
<label for="pic">更新广告图片 :</label>
<!-- <a class="btn btn-warning btn-sm" id="choice" ng-click="doChoice()" style="font-size:14px; 
color:red; font-family:微软雅黑; border-radius: 9px;">选择文件</a> -->
<input id="imageInput" type="file" accept="image/jpeg" 	    	onchange="loadImageFile();" />
<i id="img" hidden="hidden"></i>
<i id="imgName" hidden="hidden"></i>
</p>

Copier après la connexion

Capture d'écran du programme

Informations publicitaires affichées en haut du client :

arr = oPreviewImg.src.toString().split(",");
document.getElementById("img").innerHTML = arr[1];
document.getElementById("imgName").innerHTML = 	  	document.getElementById("imageInput").files[0].name;
//alert(document.getElementById("img").innerHTML);
//alert(document.getElementById("imageInput").files[0].name);// 获取   	图片名称(PS:瞬间感觉自己好聪明啊~~)
//alert(arr[0]);// 获取图片格式与编码方式
//alert(arr[1]);// 获取图片Base 64编码字节

Copier après la connexion

Interface de gestion de la publicité côté serveur :

Interface d'informations publicitaires de modification côté serveur :

Conclusion

À ce stade, mon opération de téléchargement de fichiers est enfin terminé. Ce fut un voyage semé d’embûches.

J'ai également essayé d'utiliser le plug-in ng-file-upload (voir référence 1), mais cela s'est soldé par un échec. Je n'ai vraiment pas compris le code. L'écrire après que le code source n'a eu aucun effet, et. la mise en page était fausse. J'avais aussi honte.

Le prochain problème que je dois surmonter est la pagination. Souvent, je ne réalise pas les connaissances avec lesquelles je viens d'entrer en contact.

Ce qui précède est le contenu de JavaScript Advanced (8) JS pour implémenter la fonction de prévisualisation et d'importation d'image. Pour plus de contenu connexe, veuillez prêter attention au. Site Web chinois PHP (www.php .cn) !