Ajax implémente le téléchargement de fichiers avec effet de barre de progression

Cette fois, je vais vous présenter l'implémentation Ajax du téléchargement de fichiers avec effet de barre de progression. Quelles sont les précautions pour l'implémentation Ajax du téléchargement de fichiers avec effet de barre de progression. un cas pratique. Jetons un coup d’oeil.

1. Présentation

Dans le processus de développement d'applications Web ou de développement de sites Web, il est souvent nécessaire de mettre en œuvre la fonction de téléchargement de fichiers. Pendant le processus de téléchargement de fichiers, les utilisateurs doivent souvent attendre longtemps. Afin d'informer les utilisateurs de la progression du téléchargement à temps, la barre de progression du téléchargement de fichier peut être affichée lors du téléchargement du fichier. Exécutez cette instance, comme le montre la figure 1, accédez à la page de téléchargement de fichiers, cliquez sur le bouton « Parcourir » pour sélectionner le fichier à télécharger, notez que le fichier ne peut pas dépasser 50 Mo, sinon le système affichera une invite d'erreur. Après avoir sélectionné le fichier à télécharger, cliquez sur le bouton « Soumettre », le fichier sera téléchargé et la progression du téléchargement sera affichée.

2. Points techniques

Appliquer principalement le composant open source Common-FileUpload pour réaliser le téléchargement de fichiers segmentés, afin de réaliser le processus de téléchargement. , et obtenez en permanence la progression du téléchargement. Le composant Common-FileUpload est présenté en détail ci-dessous.

Le composant Common-FileUpload est un sous-projet du projet jakarta-commons de l'organisation Apache. Ce composant peut facilement analyser divers champs de formulaire dans des requêtes de type multipart/form-data. Ce composant nécessite la prise en charge d'un autre composant appelé Common-IO. Ces deux fichiers de package de composants peuvent être téléchargés à partir du site Web http://commons.apache.org.

(1) Créer un objet de téléchargement

Lors de l'implémentation du téléchargement de fichiers à l'aide du composant Common-FileUpload, vous devez créer un objet d'usine et en créer un nouveau basé sur l'objet d'usine Objet de téléchargement de fichier, le code spécifique est le suivant :

DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);

(2) Analyser la demande de téléchargement

Après avoir créé un objet de téléchargement de fichier, vous pouvez utiliser l'objet pour analyser la demande de téléchargement afin d'obtenir tous les éléments du formulaire peut être réalisé via la méthode parseRequest() de l'objet de téléchargement de fichier. La structure syntaxique de la méthode parseRequest() est la suivante :

public List parseRequest(HttpServletRequest request) throws FileUploadException

(3) Classe FileItem

Dans le composant Common-FileUpload, qu'il s'agisse d'un champ de fichier ou un champ de formulaire normal, sont traités comme des objets FileItem. Si la méthode isFormField() de l'objet renvoie true, cela signifie qu'il s'agit d'un champ de formulaire ordinaire, sinon il s'agit d'un champ de fichier. Lors de l'implémentation du téléchargement de fichier, vous pouvez obtenir le nom du fichier téléchargé via la méthode getName() de la classe FileItem et obtenir la taille du fichier téléchargé via la méthode getSize().

3. Implémentation spécifique

(1) Créez le fichier request.js et écrivez la méthode de requête Ajax.

(2) Créez une nouvelle page de téléchargement de fichier index.jsp, ajoutez un formulaire et des éléments de formulaire pour obtenir les informations sur le fichier téléchargé, et ajoutez une étiquette

et un pourcentage d'affichage pour afficher la barre de progression < span>, le code clé est le suivant :

<form enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">

Veuillez sélectionner le fichier téléchargé :

Remarque : Veuillez contrôler la taille du fichier dans les 50 Mo.

<p id="progressBar" class="prog_border" align="left">
<img src="images/progressBar.gif" width="0" height="13" id="imgProgress"></p>
<span id="progressPercent" style="width:40px;display:none">0%</span>
<input name="Submit" type="button" value="提交" onClick="deal(this.form)">
<input name="Reset" type="reset" class="btn_grey" value="重置"></td>
</form>

(3) Créez une nouvelle classe d'implémentation de servlet UpLpad pour télécharger des fichiers. Écrivez la méthode uploadFile() dans cette classe pour implémenter le téléchargement de fichiers. Dans cette méthode, le composant Common-FileUpload est utilisé pour télécharger des fichiers en sections, calculer le pourcentage de téléchargement et l'enregistrer dans la session en temps réel. comme suit :

public void uploadFile(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=GBK");
request.setCharacterEncoding("GBK");
HttpSession session=request.getSession();
session.setAttribute("progressBar",0); //定义指定上传进度的Session变量
String error = "";
int maxSize=50*1024*1024; //单个上传文件大小的上限
DiskFileItemFactory factory = new DiskFileItemFactory(); //创建工厂对象
ServletFileUpload upload = new ServletFileUpload(factory); //创建一个新的文件上传对象
try {
List items = upload.parseRequest(request); // 解析上传请求
Iterator itr = items.iterator(); // 枚举方法
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next(); //获取FileItem对象
if (!item.isFormField()) { // 判断是否为文件域
if (item.getName() != null && !item.getName().equals("")) {//是否选择了文件
long upFileSize=item.getSize(); //上传文件的大小
String fileName=item.getName(); //获取文件名
if(upFileSize>maxSize){
error="您上传的文件太大，请选择不超过50M的文件";
break;
}
// 此时文件暂存在服务器的内存中
File tempFile = new File(fileName); //构造文件目录临时对象
String uploadPath = this.getServletContext().getRealPath("/upload");
File file = new File(uploadPath,tempFile.getName()); 
InputStream is=item.getInputStream();
int buffer=1024; //定义缓冲区的大小
int length=0;
byte[] b=new byte[buffer];
double percent=0;
FileOutputStream fos=new FileOutputStream(file);
while((length=is.read(b))!=-1){
percent+=length/(double)upFileSize*100D; //计算上传文件的百分比
fos.write(b,0,length); //向文件输出流写读取的数据
session.setAttribute("progressBar",Math.round(percent)); 
}
fos.close();
Thread.sleep(1000); //线程休眠1秒
} else {
error="没有选择上传文件！";
}
}
}
} catch (Exception e) {
e.printStackTrace();
error = "上传文件出现错误：" + e.getMessage();
}
if (!"".equals(error)) {
request.setAttribute("error", error);
request.getRequestDispatcher("error.jsp").forward(request, response);
}else {
request.setAttribute("result", "文件上传成功！");
request.getRequestDispatcher("upFile_deal.jsp").forward(request, response);
}
}

(4) Dans la page de téléchargement de fichier index.jsp, importez le fichier request.js de la méthode de requête Ajax écrite, et écrivez la méthode de requête Ajax et la fonction de rappel Ajax pour obtenir la progression du téléchargement. Le code clé est le suivant :

<script language="javascript" src="js/request.js"></script>
<script language="javascript">
var request = false;
function getProgress(){ 
var url="showProgress.jsp"; //服务器地址
var param ="nocache="+new Date().getTime(); //每次请求URL参数都不同 ，避免上传时进度条不动
request=httpRequest("post",url,true,callbackFunc,param); //调用请求方法 
}
//Ajax回调函数
function callbackFunc(){
if( request.readyState==4 ){ //判断响应是否完成 
if( request.status == 200 ){ //判断响应是否成功
var h = request.responseText; //获得返回的响应数据，该数据位上传进度百分比
h=h.replace(/\s/g,""); //去除字符串中的Unicode空白符
document.getElementById("progressPercent").style.display=""; //显示百分比 
progressPercent.innerHTML=h+"%"; //显示完成的百分比
document.getElementById("progressBar").style.display="block"; //显示进度条
document.getElementById("imgProgress").width=h*(235/100); //显示完成的进度
}
}
}
</script>

(5) Écrivez la page showProgress.jsp et appliquez l'expression EL dans cette page pour afficher la valeur de la progression du téléchargement. bar stockée dans le domaine de session. Le code spécifique est le suivant :

<%@page contentType="text/html" pageEncoding="GBK"%>
${progressBar}

(6) Écrivez la méthode JavaScript appelée par l'événement onclick du bouton de soumission du formulaire. Dans cette méthode, la méthode setInterval(). de l'objet fenêtre est utilisé pour demander au serveur à intervalles réguliers d'obtenir la dernière progression du téléchargement. La clé Le code est le suivant :

function deal(form){
form.submit(); //提交表单
timer=window.setInterval("getProgress()",500); //每隔500毫秒获取一次上传进度
}

Je pense que vous maîtrisez la méthode. après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment utiliser les paramètres de la méthode $.Ajax()

Comment ajouter, supprimer, modifier et vérifier des fichiers XML avec ajax

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!