文件上傳帶進度條

⑷ 如何實現上傳文件帶進度條

我給你提供思路，自己去實現。
1、你用的是SSH框架，spring有一個MultipartFile技術，支持單文件和多文件上傳
2、下載直接用BufferedInputStream+BufferedOutputStream去實現就可以了。
這兩個都是很好學的。挺簡單的

⑸ 文件上傳時，進度條的設計原理是什麼

以java為例：一般來說，上傳也好，下載也好，都要用到JavaI/O。 而計算進度的原理，不就是已經傳輸的大小與總大小的比值嘛。 這樣就簡單了，就拿最基本的OutputStream來說，它的基本的寫出方法為 void write(byte[] b) ，實際上寫出的過程不就是通過InputStream循環讀，然後OutputStream循環寫嘛。 你只要事先通過File類取得文件的總大小，然後在讀入或寫出的循環里加一個簡單的進度計算的步驟，每讀取或寫出一次，就將已傳輸大小增加b.length，求出比值，更新進度條。具體的計算間隔，可以根據循環次數或時間間隔來定。 編碼上，估計要用到I/O流，File，Socket以及Thread。 因為你是使用fileupload插件，所以最好查看一下它的實現代碼，已決定如何將進度功能加入其中。

⑹ 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;
}

}

⑺ JSP 上傳文件進度條怎麼做

HTTP本身無法實現上傳
進度條
，因為無法使用JS訪問文件系統，並對
文件流
進行分塊。
可以考慮2種方式實現上傳進度條：
1.flash：flash可以訪問文件系統，並以二進制方式上傳文件，這可以將文件進行分塊;
2.使用
ActiveX控制項
：這個比較復雜一點，能夠監控到每一個位元組的進度，可以自己開發或使用第三方庫。一般來說，對於前台類型的頁面，出於安全和可用性不建議使用ActiveX控制項，

⑻ 使用jquery.form.js實現文件上傳及進度條前端代碼

ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這里用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。

需要解釋下我的結構， #upload-input-file 的input標簽是真實的文件上傳按鈕，包裹form標簽後可以實現上傳功能， #upload-input-btn 的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。

去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]

將上傳事件綁定在file的input裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });

[圖片上傳失敗...(image-3d6ae0-1548557865446)]

[圖片上傳失敗...(image-9f0adf-1548557865446)]

更多用法可以 參考官網

⑼ 上傳文件與設置進度條

1、引入bootstrap.css和jquery.js;
2、點擊按鈕後獲取文件列表，添加到FormData，調用open函數指定類型與URL地址，在發起請求send（）；
3、監聽onreadystatechange事件，當伺服器回應後，把傳回來的數據轉換成JSON字元串，修改img的URL地址，讓圖片文件顯示在頁面中；
4、創建xhr對象開啟監聽文件上傳進度，e.lengthComputable是true則計算進度條百分比，把結果給進度條；
5、進度條完成後，修改顏色，移除類添加類

HTML

JS