js非同步上傳顯示進度條_JS程序圖片（即進度條）載入

⑴ 大神求救命，SSH的非同步上傳進度條怎麼做，求給個例子！

你好，一下包都是我經過測試，並且運行過項目的包，你看看缺少什麼，有幾個不一定是SSH的包，還得配合其他插件的包。

⑵ js製作上傳進度條

這個需要前端與後端的配合
開始上傳時用Ajax於後台通訊取得當前的上傳結果
然後前端控制DIV效果。
你可以搜java 待進度條文件上傳。

⑶ js ajax怎麼獲取上傳的進度

ajax文件上傳的進度條實現

<!DOCTYPE html>
<html>
<head>
<title>html5_2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#parent{width:550px; height:10px; border:2px solid #09F;}
#son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
function showPic(){
var pic = $("#pic").get(0).files[0];
$("img").prop("src" , window.URL.createObjectURL(pic) );
uploadFile();
}
function uploadFile(){
var pic = $("#pic").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
/**
* 必須false才會避開jQuery對 formdata 的默認處理
* XMLHttpRequest會對 formdata 進行正確的處理
*/
$.ajax({
type: "POST",
url: "upload",
data: formData ,
processData : false,
//必須false才會自動加上正確的Content-Type
contentType : false ,
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});
}
/**
* 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已經上傳大小情況
var tot = evt.total; //附件總大小
var per = Math.floor(100*loaded/tot); //已經上傳的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
</script>
</head>
<body>
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="showPic()"/>
<input type="button" value="上傳圖片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
</body>
</html>

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

}

⑸ JS程序圖片（即進度條）載入

ajax默認情況下是非同步執行的（建議盡量非同步），也就是說當發出ajax命令後，程序版是不停權頓的，如果這時候隱藏圖片，那麼就相當於沒有顯示了（瀏覽器可能來不及把圖片顯示出來就被你隱藏了）。所以，標准做法是在ajax的回調函數中進行圖片的隱藏（建議用complete事件），比如：

varloading=document.getElementById("loading");
loading.style.display="block";//盡量不要通過設為空白來顯示圖片，兼容性差
ajax({
//...其他參數略
success:...
fail:...
complete:function(){
loading.style.display="none";//在這里隱藏！
}
});

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

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

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

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

⑺ html5怎麼用原生JS上傳表單(多個)的進度條

提供思路:(暫無電腦)
進度條用兩個嵌套組成:內外div，內用來顯示進度條進度，外用來包含整個進度條。進度條百分比利用:offsetleft,width等來設計

⑻ js怎麼非同步載入loading

js非同步載入loading的方法復如下制：
1、獲取載入的圖片
var image = document.images[0];
2、手動創建一個image對象
var downloadingImage = new Image();
3、調用onload事件載入src真正的鏈接地址
downloadingImage.onload = function(){
image.src = this.src; //src後置指定
};
downloadingImage.src = "目標圖片地址";

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

後端的責任。

⑽ 我非同步載入進度條怎麼顯示不出來

進度條也好，loading的轉圈也好，其實都是為了給用戶一個及時的反饋，增加用戶的耐性回。答
不過瀏覽器也好，app等定製UI也好，都逐漸在優化載入，比如載入多少逐漸顯示。先載入框架，再載入內容等非同步顯示。

導航:首頁 > 編程語言 > js非同步上傳顯示進度條

js非同步上傳顯示進度條

與js非同步上傳顯示進度條相關的資料

友情鏈接