집 >웹 프론트엔드 >JS 튜토리얼 >Ajax 기술을 기반으로 진행률 표시줄을 사용하여 파일 업로드 구현

Ajax 기술을 기반으로 진행률 표시줄을 사용하여 파일 업로드 구현

亚连원래의: 2018-05-23 17:00:291447검색

이 글은 Ajax 기술을 기반으로 진행률 표시줄을 사용하여 파일 업로드를 구현하는 데 관련된 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

실제 웹 애플리케이션이나 웹사이트 개발 과정에서 파일 업로드 기능을 구현해야 하는 경우가 종종 있습니다. 파일 업로드 과정에서 사용자가 오랜 시간 동안 기다려야 하는 경우가 많습니다. 사용자에게 업로드 진행 상황을 적시에 알리기 위해 파일을 업로드하는 동안 파일 업로드 진행률 표시줄을 표시할 수 있습니다. 그림 1과 같이 이 인스턴스를 실행하고 파일 업로드 페이지에 액세스한 후 "찾아보기" 버튼을 클릭하여 업로드할 파일을 선택합니다. 파일은 50MB를 초과할 수 없습니다. 그렇지 않으면 시스템에서 오류 메시지가 표시됩니다. 업로드할 파일을 선택한 후 "제출" 버튼을 클릭하면 파일이 업로드되고 업로드 진행 상황이 표시됩니다.

2. 기술적 포인트

주로 오픈 소스 Common-FileUpload 구성 요소를 사용하여 분할된 파일 업로드를 달성하여 업로드 프로세스 중에 업로드 진행 상황을 지속적으로 얻습니다. Common-FileUpload 구성 요소는 아래에 자세히 소개되어 있습니다.

Common-FileUpload 구성 요소는 Apache 조직의 jakarta-commons 프로젝트에 속한 하위 프로젝트입니다. 이 구성 요소는 multipart/form-data 유형 요청의 다양한 양식 필드를 쉽게 구문 분석할 수 있습니다. 이 구성 요소에는 Common-IO라는 다른 구성 요소의 지원이 필요합니다. 이 두 구성 요소 패키지 파일은 http://commons.apache.org 웹 사이트에서 다운로드할 수 있습니다.

(1) 업로드 객체 생성

Common-FileUpload 컴포넌트를 사용하여 파일 업로드를 구현할 때 팩토리 객체를 생성하고 해당 팩토리 객체를 기반으로 새 파일 업로드 객체를 생성해야 합니다.

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

(2) 업로드 요청 구문 분석

파일 업로드 개체를 생성한 후 해당 개체를 사용하여 업로드 요청을 구문 분석하고 모든 양식 항목을 가져올 수 있습니다. 달성하기 위해 파일 업로드 개체의 parsRequest() 메서드를 사용합니다. ParseRequest() 메서드의 구문 구조는 다음과 같습니다.

public List parseRequest(HttpServletRequest request) throws FileUploadException

(3) FileItem 클래스

Common-FileUpload 컴포넌트에서는 파일 필드인지 일반 형식 필드인지, FileItem 개체로 처리됩니다. 객체의 isFormField() 메서드가 true를 반환하면 이는 일반 양식 필드임을 의미하고, 그렇지 않으면 파일 필드임을 의미합니다. 파일 업로드 구현 시 FileItem 클래스의 getName() 메소드를 통해 업로드된 파일의 파일명을 얻을 수 있고, getSize() 메소드를 통해 업로드된 파일의 크기를 얻을 수 있다.

3. 구체적인 구현

(1) request.js 파일을 생성하고 파일에 Ajax 요청 메소드를 작성합니다.

(2) 새 파일 업로드 페이지 index.jsp를 만들고, 업로드된 파일 정보를 얻기 위한 양식 및 양식 요소를 추가하고, 진행률 표시줄을 표시하기 위한 e388a4556c0f65e1904146cc1a846bee span> 태그의 경우 키 코드는 다음과 같습니다:

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

업로드할 파일을 선택하세요: 39584323c9c6acbe0c391b2a6a78aef3

참고:

파일 크기를 선택해주세요. 50M 이내로 조절하세요.

<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) 파일 업로드를 위한 새로운 서블릿 구현 클래스 UpLpad를 생성합니다. 파일 업로드를 구현하려면 이 클래스에 uploadFile() 메서드를 작성합니다. 이 메서드에서는 Common-FileUpload 구성 요소를 사용하여 섹션별로 파일을 업로드하고 업로드 비율을 계산하며 이를 실시간으로 세션에 저장합니다.

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) 파일 업로드 페이지 index.jsp에서 작성된 Ajax 요청 메소드의 request.js 파일을 가져오고 Ajax 요청 메소드와 Ajax 콜백 함수를 작성하여 업로드를 얻습니다.

<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) showProgress.jsp 페이지를 작성하고 이 페이지에 EL 표현식을 적용하여 세션 도메인에 저장된 업로드 진행률 표시줄의 값을 출력합니다. 구체적인 코드는 다음과 같습니다.

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

(6) 양식 제출 작성 버튼 onclick 이벤트에 의해 호출되는 JavaScript 메소드는 window 객체의 setInterval() 메소드를 통해 정기적으로 서버에 요청하여 최신 정보를 얻습니다. 업로드 진행상황은 다음과 같습니다.

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

위 내용은 제가 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

Ajax 기술을 기반으로 진행률 표시줄을 사용하여 파일 업로드 구현

관련 기사