집 > 기사 > 웹 프론트엔드 > Ajax는 진행률 표시줄 효과로 파일 업로드를 구현합니다.

Ajax는 진행률 표시줄 효과로 파일 업로드를 구현합니다.

php中世界最好的语言원래의: 2018-04-04 11:41:552016검색

이번에는 진행률 표시줄 효과 기능이 포함된 Ajax 구현 파일 업로드 를 소개합니다. 진행률 표시줄 효과를 포함하는 Ajax 파일 업로드 구현에 대한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

1. 개요

실제 웹 애플리케이션 개발이나 웹사이트 개발 과정에서 파일 업로드 기능을 구현해야 하는 경우가 종종 있습니다. 파일 업로드 과정에서 사용자가 오랜 시간 동안 기다려야 하는 경우가 많습니다. 사용자에게 업로드 진행 상황을 적시에 알리기 위해 파일을 업로드하는 동안 파일 업로드 진행률 표시줄을 표시할 수 있습니다. 그림 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) 업로드 요청 구문 분석

파일 업로드 개체를 생성한 후 해당 개체를 사용하여 업로드 요청을 구문 분석하고 모든 양식 항목을 가져올 수 있습니다. 파일 업로드 객체. 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를 만들고 업로드된 파일 정보를 얻기 위한 양식 및 양식 요소를 추가하고 진행률 표시줄을 표시하기 위한

레이블과 백분율을 표시하기 위한 ; 태그, 키 코드는 다음과 같습니다:

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

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

참고: 파일을 제어하세요. 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毫秒获取一次上传进度
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 PHP 중국어 웹사이트 관련 기사를 주목하세요!