Implementierung des Datei-Uploads mit Fortschrittsbalken basierend auf Ajax-Technologie

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Implementierung des Datei-Uploads mit Fortschrittsbalken basierend auf der Ajax-Technologie vor. Er ist sehr gut und hat Referenzwert.

1. Übersicht

Im eigentlichen Webanwendungsentwicklungs- 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

Wenden Sie hauptsächlich die Open-Source-Common-FileUpload-Komponente an, um einen segmentierten Datei-Upload zu erreichen Auf diese Weise kann der Upload-Fortschritt während des Upload-Vorgangs kontinuierlich abgerufen werden. 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 mehrteiligen/Formulardatentyp-Anfragen 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

Wenn die Common-FileUpload-Komponente das Hochladen von Dateien implementiert, muss ein Factory-Objekt erstellt und darauf basieren Auf dem Factory-Objekt wird ein neues Datei-Upload-Objekt erstellt. Der spezifische Code lautet wie folgt:

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

(2) Analysieren Sie den Upload Anfrage

Nachdem Sie ein Datei-Upload-Objekt erstellt haben, können Sie das Objekt verwenden, um die Upload-Anfrage zu analysieren und alle Formularelemente abzurufen. Dies kann über die Methode parseRequest() des Datei-Uploads erreicht werden Objekt. Die Syntaxstruktur der parseRequest()-Methode lautet wie folgt:

public List parseRequest(HttpServletRequest request) throws FileUploadException

(3) FileItem-Klasse

In der Common-FileUpload-Komponente wird es unabhängig davon, ob es sich um ein Dateifeld oder ein normales Formularfeld handelt, als FileItem-Objekt 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 Datei „request.js“ und schreiben Sie die Ajax-Anfrage in die Dateimethode.

(2) Erstellen Sie eine neue Datei-Upload-Seite index.jsp, fügen Sie ein Formular und Formularelemente zum Abrufen hochgeladener Dateiinformationen hinzu und fügen Sie ein e388a4556c0f65e1904146cc1a846bee-Tag zum Anzeigen des Fortschrittsbalkens hinzu 45a2772a6b6107b401db3c9b82c049c2-Tag, das den Prozentsatz anzeigt, 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: bb421fb2602654b1d9b6d6045eb94537

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-Anfragemethode. und schreiben Sie die Ajax-Anforderungsmethode, um den Upload-Fortschritt und die Ajax-Rückruffunktion zu erhalten. Der Schlüsselcode lautet wie folgt:

<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 showProgress.jsp Seite, wenden Sie die EL-Ausdrucksausgabe auf dieser Seite an und speichern Sie sie in Der Wert des Upload-Fortschrittsbalkens in der Sitzungsdomäne, der spezifische Code lautet wie folgt:

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

(6) Schreiben Sie die JavaScript-Methode, die von der Schaltfläche zum Senden des Formulars bei einem Klickereignis aufgerufen wird. Bei dieser Methode wird der Server in regelmäßigen Abständen über die Methode setInterval() des Fensterobjekts aufgefordert, den neuesten Upload zu erhalten Der Schlüsselcode lautet wie folgt:

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

Das Obige ist das, was ich für Sie zusammengestellt habe Zukunft.

Verwandte Artikel:

Diskussion von Problemen im Zusammenhang mit readyState und Status in Ajax

Umfassende Analyse von $.Ajax( ) Methodenparameter (grafisches Tutorial)

Ajax-Cache-Probleme und -Lösungen unter IE8

Das obige ist der detaillierte Inhalt vonImplementierung des Datei-Uploads mit Fortschrittsbalken basierend auf Ajax-Technologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!