js上傳文件進度條

❶ java多文件上傳顯示進度條

使用 apache fileupload ,spring MVC jquery1.6x , bootstrap 實現一個帶進度條的多文件上傳，由於fileupload 的局限，暫不能實現每個上傳文件都顯示進度條，只能實現一個總的進度條，效果如圖：

packagecom.controller;

importjava.util.List;

importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjavax.servlet.http.HttpSession;

importorg.apache.commons.fileupload.FileItemFactory;
importorg.apache.commons.fileupload.ProgressListener;
importorg.apache.commons.fileupload.disk.DiskFileItemFactory;
importorg.apache.commons.fileupload.servlet.ServletFileUpload;
importorg.apache.log4j.Logger;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestMethod;
importorg.springframework.web.bind.annotation.ResponseBody;
importorg.springframework.web.servlet.ModelAndView;

@Controller
{
Loggerlog=Logger.getLogger(FileUploadController.class);

/**
*upload上傳文件
*@paramrequest
*@paramresponse
*@return
*@throwsException
*/
@RequestMapping(value="/upload.html",method=RequestMethod.POST)
publicModelAndViewupload(HttpServletRequestrequest,
HttpServletResponseresponse)throwsException{
finalHttpSessionhs=request.getSession();
ModelAndViewmv=newModelAndView();
booleanisMultipart=ServletFileUpload.isMultipartContent(request);
if(!isMultipart){
returnmv;
}
//Createafactoryfordisk-basedfileitems
FileItemFactoryfactory=newDiskFileItemFactory();

//Createanewfileuploadhandler
ServletFileUploapload=newServletFileUpload(factory);
upload.setProgressListener(newProgressListener(){
publicvoipdate(longpBytesRead,longpContentLength,intpItems){
ProcessInfopri=newProcessInfo();
pri.itemNum=pItems;
pri.readSize=pBytesRead;
pri.totalSize=pContentLength;
pri.show=pBytesRead+"/"+pContentLength+"byte";
pri.rate=Math.round(newFloat(pBytesRead)/newFloat(pContentLength)*100);
hs.setAttribute("proInfo",pri);
}
});
Listitems=upload.parseRequest(request);
//Parsetherequest
//Processtheuploadeditems
//Iteratoriter=items.iterator();
//while(iter.hasNext()){
//FileItemitem=(FileItem)iter.next();
//if(item.isFormField()){
//Stringname=item.getFieldName();
//Stringvalue=item.getString();
//System.out.println("thisiscommonfeild!"+name+"="+value);
//}else{
//System.out.println("thisisfilefeild!");
//StringfieldName=item.getFieldName();
//StringfileName=item.getName();
//StringcontentType=item.getContentType();
//booleanisInMemory=item.isInMemory();
//longsizeInBytes=item.getSize();
//FileuploadedFile=newFile("c://"+fileName);
//item.write(uploadedFile);
//}
//}
returnmv;
}


/**
*process獲取進度
*@paramrequest
*@paramresponse
*@return
*@throwsException
*/
@RequestMapping(value="/process.json",method=RequestMethod.GET)
@ResponseBody
publicObjectprocess(HttpServletRequestrequest,
HttpServletResponseresponse)throwsException{
return(ProcessInfo)request.getSession().getAttribute("proInfo");
}

classProcessInfo{
publiclongtotalSize=1;
publiclongreadSize=0;
publicStringshow="";
publicintitemNum=0;
publicintrate=0;
}

}

❷ html文件上傳進度條怎麼實現

多個文件可以用js算進度，單個文件你就做個進度效果就可以了，上傳完畢就進度完成。

❸ 怎麼實現文件批量上傳 顯示進度條而且上傳後不跳轉頁面 推薦幾個上傳插件

用JSP可以批量上傳，要想帶進度條，單單JSP似乎難以做到，但可借用一些JS插件，如：ExtJS。

ExtJS裡面有進度條功能，將JSP與ExtJS內部的數據結合起來，應該可以實現，不過這種我沒做過。

在我所見中，163郵箱里有這種的功能，可以參考一下。

❹ antd vue upload組件使用customRequest上傳文件顯示文件上傳進度

antd-vue上傳文件upload組件使用自定義上傳方法customRequest無法顯示文件上傳進度條，如下圖紅框內的進度條無法顯示當前文件上傳進度

於是，在網上搜索解決方案：

第一種解決方案是自己封裝組件，通過axios請求的onUploadProgress來獲取文件上傳進度，個人覺得太麻煩；

第二種解決方案是通過upload組件內的方法來顯示進度條，參考文章： https://blog.csdn.net/LittleBlackyoyoyo/article/details/104810242

我採用了第二種解決方案，但是使用調用不了參考文章中的`options.onSuccess(res, options.file)` 

於是查看了github上的源碼，決定通過$refs調用upload組件中顯示進度條的方法和上傳成功方法：

html部分：

```html

<a-upload

  ref="uploadRef"

  name="file"

  :multiple="false"

  :showUploadList="true"

  :file-list="fileList"

  :customRequest="customRequest"

  :remove="removeFile"

  @change="fileChange"

>

  <a-button>

  <a-icon type="upload" /> 上傳文件</a-button>

</a-upload>

```

js部分：

```javascript

uploadFile('upload_files', fileData.file, {

onUploadProgress: (progressEvent) => {

const percentNum = Math.round((progressEvent.loaded * 100) / progressEvent.total);

this.$refs.uploadRef.onProgress(

{

percent: percentNum

},

fileData.file

)

}

}).then(res => {

fileData.file.status = 'done'

fileData.file.url = this.picsPrefix + res.result

this.$refs.uploadRef.onSuccess(res, fileData.file, '')

})

},

fileChange({ file }) {

if (!file.stop) {

this.fileList = []

this.fileList.push(file)

}

},

```

❺ 前端上傳文件實時顯示進度條和上傳速度的工作原理是怎樣的

後端的責任。