Ajax implementiert das Hochladen von Dateien mit Fortschrittsbalkeneffekt

Dieses Mal werde ich Ihnen die Ajax-Implementierung des Datei-Uploads mit Fortschrittsbalkeneffekt vorstellen. Was sind die Vorsichtsmaßnahmen für die Ajax-Implementierung des Datei-Uploads mit Fortschrittsbalkeneffekt? Ein praktischer Fall.

1. Übersicht

Im eigentlichen Webanwendungs- oder Website-Entwicklungsprozess ist es oft notwendig, die Datei-Upload-Funktion zu implementieren. Während des Datei-Upload-Vorgangs müssen Benutzer häufig lange warten. Um Benutzer rechtzeitig über den Upload-Fortschritt zu informieren, kann beim Hochladen der Datei der Fortschrittsbalken für den Datei-Upload angezeigt werden. Führen Sie dieses Beispiel wie in Abbildung 1 gezeigt aus, greifen Sie auf die Datei-Upload-Seite zu, klicken Sie auf die Schaltfläche „Durchsuchen“, um die hochzuladende Datei auszuwählen. Beachten Sie, dass die Datei 50 MB nicht überschreiten darf, da das System sonst eine Fehlermeldung ausgibt. Nachdem Sie die hochzuladende Datei ausgewählt haben, klicken Sie auf die Schaltfläche „Senden“. Die Datei wird hochgeladen und der Upload-Fortschritt wird angezeigt.

2. Technische Punkte

Verwenden Sie hauptsächlich die Open-Source-Common-FileUpload-Komponente, um den segmentierten Datei-Upload zu realisieren, um den Upload-Prozess zu realisieren , und erhalten Sie kontinuierlich den Upload-Fortschritt. Die Common-FileUpload-Komponente wird im Folgenden ausführlich vorgestellt.

Die Common-FileUpload-Komponente ist ein Unterprojekt des Jakarta-Commons-Projekts der Apache-Organisation. Diese Komponente kann problemlos verschiedene Formularfelder in Anfragen vom Typ Multipart/Formulardaten analysieren. Diese Komponente erfordert Unterstützung von einer anderen Komponente namens Common-IO. Diese beiden Komponentenpaketdateien können von der Website http://commons.apache.org heruntergeladen werden.

(1) Erstellen Sie ein Upload-Objekt

Beim Implementieren des Datei-Uploads mithilfe der Common-FileUpload-Komponente müssen Sie ein Factory-Objekt erstellen und darauf basierend ein neues erstellen Das Factory-Objekt Datei-Upload-Objekt, der spezifische Code lautet wie folgt:

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

(2) Upload-Anfrage analysieren

Nachdem Sie ein Datei-Upload-Objekt erstellt haben, können Sie dies tun Verwenden Sie das Objekt, um den Upload zu analysieren. Die Anforderung zum Abrufen aller Formularelemente kann über die parseRequest()-Methode des Datei-Upload-Objekts erreicht werden. Die Syntaxstruktur der parseRequest()-Methode lautet wie folgt:

public List parseRequest(HttpServletRequest request) throws FileUploadException

(3) FileItem-Klasse

In der Common-FileUpload-Komponente, ob es sich um eine handelt B. ein Dateifeld oder ein normales Formularfeld, werden als FileItem-Objekte behandelt. Wenn die Methode isFormField() des Objekts „true“ zurückgibt, bedeutet dies, dass es sich um ein gewöhnliches Formularfeld handelt, andernfalls handelt es sich um ein Dateifeld. Beim Implementieren des Datei-Uploads können Sie den Dateinamen der hochgeladenen Datei über die Methode getName() der Klasse FileItem und die Größe der hochgeladenen Datei über die Methode getSize() abrufen.

3. Spezifische Implementierung

(1) Erstellen Sie die request.js-Datei und schreiben Sie die AjaxAnfragemethode.

(2) Erstellen Sie eine neue Datei-Upload-Seite index.jsp, fügen Sie ein Formular und Formularelemente zum Abrufen der hochgeladenen Dateiinformationen hinzu und fügen Sie eine

-Beschriftung und einen Anzeigeprozentsatz für die Anzeige des Fortschrittsbalkens hinzu. span>-Tag, der Schlüsselcode lautet wie folgt:

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

Bitte wählen Sie die hochgeladene Datei aus:

Hinweis: Bitte kontrollieren Sie die Dateigröße innerhalb von 50 MB.

<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) Erstellen Sie eine neue Servlet-Implementierungsklasse UpLpad zum Hochladen von Dateien. Schreiben Sie die Methode uploadFile() in diese Klasse, um das Hochladen von Dateien zu implementieren. In dieser Methode wird die Common-FileUpload-Komponente verwendet, um Dateien in Abschnitten hochzuladen, den Upload-Prozentsatz zu berechnen und sie in Echtzeit in der Sitzung zu speichern wie folgt:

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) Importieren Sie in der Datei-Upload-Seite index.jsp die Datei request.js der geschriebenen Ajax-Anforderungsmethode und schreiben Sie die Ajax-Anforderungsmethode und die Ajax--Rückruffunktion um den Upload-Fortschritt zu erhalten:

<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) Schreiben Sie die Seite showProgress.jsp und wenden Sie den EL-Ausdruck auf dieser Seite an, um den Wert des Upload-Fortschritts auszugeben Der spezifische Code lautet wie folgt:

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

(6) Schreiben Sie die JavaScript-Methode, die vom Onclick-Ereignis der Formularübermittlungsschaltfläche aufgerufen wird des Fensterobjekts wird verwendet, um den Server in regelmäßigen Abständen anzufordern, um den neuesten Upload-Fortschritt zu erhalten. Der Schlüssel lautet wie folgt:

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

Ich glaube, Sie beherrschen die Methode Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie die Parameter der $.Ajax()-Methode

So fügen Sie XML-Dateien mit Ajax hinzu, löschen, ändern und überprüfen

Das obige ist der detaillierte Inhalt vonAjax implementiert das Hochladen von Dateien mit Fortschrittsbalkeneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!