Récemment, je développe une page Web qui peut télécharger des images sur le serveur. Permettez-moi de partager les exigences et les idées d'implémentation ainsi que le code source ajax. Les amis intéressés par ajax peuvent se référer à Ajax et Spring pour implémenter <.>Téléchargement de fichiers Fonction !
En raison des besoins du projet, développez une page de formulaire Web capable de télécharger des images sur le serveur.1. Exigences
Page de formulaire Web, vous pouvez télécharger des images et d'autres informations textuelles via le formulaire.2. Processus de téléchargement d'images
Je n'ai jamais fait ce type de page auparavant, j'ai donc recherché des informations. Il s'avère qu'une pratique courante consiste à télécharger d'abord l'image dans un répertoire de fichiers côté serveur, et le serveur renvoie le chemin de stockage de l'image à la réception, puis la réception soumet le chemin de stockage de l'image et un autre formulaire ; informations au serveur et toutes les informations du formulaire sont stockées dans la base de données.3. Méthode
En raison des besoins du projet, je présenterai ici deux méthodes de téléchargement d'images. La première consiste à utiliser. ajax pour télécharger directement une image ; la seconde consiste à d'abord couper l'image en fichiers plus petits à la réception, puis à utiliser ajax pour télécharger les images sur le serveur respectivement, et le serveur divisera les fichiers. (La méthode 2 convient au téléchargement de fichiers plus volumineux) Ci-dessous, je présenterai respectivement les deux méthodes.Méthode 1 : Télécharger directement
1 page html
<pre name="code" class="html"><!DOCTYPE html> <head></head> <body> <form id="uploadForm" action="/PicSubmit/form" method="post" enctype="multipart/form-data" onsubmit="return submit_check()" class="bootstrap-frm" >
<input id = "sid" type = "text" name="name" />
<pre name="code" class="html"><input id = "fileImage" type = "file" name="filename" />
<input id = "addressid" type = "hidden" name="address" />
<input id="ajaxsub" type="button" class="button" value="上传图片" onclick="fileUpload()<span style="font-family: Arial, Helvetica, sans-serif;">" /> </span>
<input type="submit" class="button" value="提交表单" /> <input type="reset" class="button" value="重置表单" />