建站
咨詢
售后
建站咨詢
新聞中心
用jquery如何實(shí)現(xiàn)提交表單點(diǎn)擊提交之后顯示正在上傳中，之后顯示上傳成功的效果？
需要準(zhǔn)備的材料分別有：電腦、html編輯器、瀏覽器。
創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十年品質(zhì)，值得信賴！
1、首先，打開html編輯器，新建html文件，例如：index.html，并引入jquery。
2、在index.html中的script標(biāo)簽，輸入jquery代碼：
$('button').click(function () {
$('body').append('span正在上傳中/span');
setTimeout("$('span').text('上傳成功');", 1000);
});
3、瀏覽器運(yùn)行index.html頁面，點(diǎn)擊提交按鈕，顯示了“正在上傳中”。
4、例如過了1秒后變成了上傳成功的提示。
jQuery實(shí)現(xiàn)文件上傳。
/*?jQuery實(shí)現(xiàn)文件上傳，參考例子如下：
package?com.kinth.hddpt.file.action;??
import?java.io.File;??
import?java.io.FileNotFoundException;??
import?java.io.FileOutputStream;??
import?java.io.IOException;??
import?java.io.InputStream;??
import?java.io.OutputStream;??
import?java.util.ArrayList;??
import?java.util.Calendar;??
import?java.util.Enumeration;??
import?java.util.Hashtable;??
import?java.util.List;??
import?javax.servlet.http.HttpServletRequest;??
import?javax.servlet.http.HttpServletResponse;??
import?net.sf.json.JSONArray;??
import?org.apache.commons.logging.Log;??
import?org.apache.commons.logging.LogFactory;??
import?org.apache.struts.action.ActionForm;??
import?org.apache.struts.action.ActionForward;??
import?org.apache.struts.action.ActionMapping;??
import?org.apache.struts.upload.FormFile;??
import?org.hibernate.criterion.MatchMode;??
import?org.hibernate.criterion.Order;??
import?org.hibernate.criterion.Restrictions;??
import?com.gdcn.bpaf.common.base.search.MyCriteria;??
import?com.gdcn.bpaf.common.base.search.MyCriteriaFactory;??
import?com.gdcn.bpaf.common.base.service.BaseService;??
import?com.gdcn.bpaf.common.helper.PagerList;??
import?com.gdcn.bpaf.common.helper.WebHelper;??
import?com.gdcn.bpaf.common.taglib.SplitPage;??
import?com.gdcn.bpaf.security.model.LogonVO;??
import?com.gdcn.components.appauth.common.helper.DictionaryHelper;??
import?com.kinth.common.base.action.BaseAction;??
import?com.kinth.hddpt.file.action.form.FileCatalogForm;??
import?com.kinth.hddpt.file.model.FileCatalog;??
import?com.kinth.hddpt.file.service.FileCatalogService;??
import?com.kinth.hddpt.file.util.MyZTreeNode;??
/**?
*?p?
*?description:?“文件上傳的Struts層請求處理類”?
*?/p?
*?@date?:?2013-1-14?
*/??
public?class?FileCatalogAction?extends?BaseActionFileCatalog?{??
@SuppressWarnings("unused")??
private?static?Log?log?=?LogFactory.getLog(FileCatalogAction.class);?//?日志記錄??
private?FileCatalogService?fileCatalogService;??
//?刪除記錄的同時刪除相應(yīng)文件??
public?ActionForward?fileDelete(ActionMapping?mapping,?ActionForm?form,??
HttpServletRequest?request,?HttpServletResponse?response)??
throws?Exception?{??
String[]?id?=?request.getParameterValues("resourceId");??
if?(id?!=?null??id[0].contains(","))?{??
id?=?id[0].split(",");??
}??
String[]?fileUrls?=?new?String[id.length];??
for?(int?j?=?0;?j??id.length;?j++)?{??
fileUrls[j]?=?fileCatalogService.findObject(id[j]).getFileUrl();??
if?(!isEmpty(fileUrls[j]))?{??
//?如果該文件夾不存在則創(chuàng)建一個uptext文件夾??
File?fileup?=?new?File(fileUrls[j]);??
if?(fileup.exists()?||?fileup?!=?null)?{??
fileup.delete();??
}??
}??
fileCatalogService.deleteObject(id[j]);??
}??
setAllActionInfos(request);??
return?list(mapping,?form,?request,?response);??
}??
@Override??
public?ActionForward?save(ActionMapping?mapping,?ActionForm?form,??
HttpServletRequest?request,?HttpServletResponse?response)??
throws?Exception?{??
String?id?=?request.getParameter("resourceId");???
Boolean?fileFlag?=?Boolean.valueOf(request.getParameter("fileFlag"));??
if(fileFlag?!=?null??fileFlag?==?true){??
return?super.save(mapping,?form,?request,?response);??
}else{??
String?fileUrl?=?this.fileUpload(form,?request,?id,?fileFlag);??
response.setContentType("text/html");??
response.setCharacterEncoding("GBK");??
response.setHeader("Charset",?"GBK");??
response.setHeader("Cache-Control",?"no-cache");??
response.getWriter().write(fileUrl);??
response.getWriter().flush();??
}??
return?null;??
}??
@SuppressWarnings("unchecked")??
public?String?fileUpload(ActionForm?form,HttpServletRequest?request,String?id,Boolean?fileFlag)?throws?FileNotFoundException,?IOException{??
request.setCharacterEncoding("GBK");??
String?basePath?=?getServlet().getServletConfig().getServletContext().getRealPath("")+"/";??
String?filePath?=?"uploads/";?//?獲取項目根路徑????;??
/*注釋部分對應(yīng)jquery?upload?uploadify插件的后臺代碼,只是還存在編碼問題，默認(rèn)為utf-8?
String?savePath?=?getServlet().getServletConfig().getServletContext().getRealPath("");?//?獲取項目根路徑?
savePath?=?savePath?+?"\\uploads\\";?
//讀取上傳來的文件信息?
HashtableString,?FormFile?fileHashtable?=?form.getMultipartRequestHandler().getFileElements();?
EnumerationString?enumeration?=?fileHashtable.keys();?
enumeration.hasMoreElements();?
String?key?=?(String)?enumeration.nextElement();?
FormFile?formFile?=?(FormFile)fileHashtable.get(key);?
String?filename?=?formFile.getFileName().trim();?//文件名?
filename?=?new?EncodeChange().changeCode(filename);?
String?filetype?=?filename.substring(filename.lastIndexOf(".")?+?1);//文件類型?
savePath?=?savePath+filetype+"\\";?
System.out.println("path:"+savePath);?
String?realPath?=?savePath?+??filename;?//真實(shí)文件路徑?
//如果該文件夾不存在則創(chuàng)建一個文件夾?
File?fileup?=?new?File(savePath);?
if(!fileup.exists()||fileup==null){?
fileup.mkdirs();?
}?
if?(!filename.equals(""))?{?
//?在這里上傳文件?
InputStream?is?=?formFile.getInputStream();?
OutputStream?os?=?new?FileOutputStream(realPath);?
int?bytesRead?=?0;?
byte[]?buffer?=?new?byte[8192];?
while?((bytesRead?=?is.read(buffer,?0,?8192))?!=?-1)?{?
os.write(buffer,?0,?bytesRead);?
}?
os.close();?
is.close();?
//如果是修改操作，則刪除原來的文件?
String?id?=?request.getParameter("resourceId");?
if?(!isEmpty(id))?{?
FileCatalog?fileCatalog?=?fileCatalogService.findObject(id);?
String?fileUrl?=?fileCatalog.getFileUrl();?
if?(!isEmpty(fileUrl))?{?
File?filedel?=?new?File(fileUrl);?
if(filedel.exists()||filedel!=null){?
filedel.delete();?
}?
}?
request.setAttribute("entity",?fileCatalog);?
}?
response.getWriter().print(realPath);//?向頁面端返回結(jié)果信息?
}*/??
//?讀取上傳來的文件信息??
HashtableString,?FormFile?fileHashtable?=?form.getMultipartRequestHandler().getFileElements();??
EnumerationString?enumeration?=?fileHashtable.keys();??
enumeration.hasMoreElements();??
String?key?=?(String)?enumeration.nextElement();??
FormFile?formFile?=?(FormFile)?fileHashtable.get(key);??
String?filename?=?formFile.getFileName().trim();?//?文件名??
String?filetype?=?filename.substring(filename.lastIndexOf(".")?+?1);//?文件類型???????
Integer?fileSize?=?formFile.getFileSize();??
filePath?+=?Calendar.getInstance().get(Calendar.YEAR)+"/"+filetype+"/"?;??
String?realPath?=?basePath+filePath+filename;??//?真實(shí)文件路徑??
if?(!filename.equals(""))?{??
//?如果是修改操作，則刪除原來的文件??
if?(!isEmpty(id))?{??
FileCatalog?fileCatalog?=?fileCatalogService.findObject(id);??
String?fileUrl?=?fileCatalog.getFileUrl();??
if?(!isEmpty(fileUrl))?{??
fileUrl?=?basePath?+?fileUrl;??
File?filedel?=?new?File(fileUrl);??
if?(filedel.exists()?||?filedel?!=?null)?{??
filedel.delete();??
}??
}??
request.setAttribute("entity",?fileCatalog);??
}??
//?如果該文件夾不存在則創(chuàng)建一個文件夾??
File?fileup?=?new?File(basePath+filePath);??
if?(!fileup.exists()?||?fileup?==?null)?{??
fileup.mkdirs();??
}??
//?在這里上傳文件??
InputStream?is?=?formFile.getInputStream();??
OutputStream?os?=?new?FileOutputStream(realPath);??
int?bytesRead?=?0;??
byte[]?buffer?=?new?byte[8192];??
while?((bytesRead?=?is.read(buffer,?0,?8192))?!=?-1)?{??
os.write(buffer,?0,?bytesRead);??
}??
os.close();??
is.close();??
}??
filePath?+=?filename;??
String?result?=?"{\"fileName\":\""+filename+"\",\"fileType\":\""+filetype+"\",\"fileSize\":"+fileSize+",\"fileUrl\":\""+filePath+"\"}";???????????
return?result;??
}??
public?FileCatalogService?getFileCatalogService()?{??
return?fileCatalogService;??
}??
public?void?setFileCatalogService(FileCatalogService?fileCatalogService)?{??
this.fileCatalogService?=?fileCatalogService;??
}??
}
jquery 多個 上傳文件教程
jquery 實(shí)現(xiàn)多個上傳文件教程：
首先創(chuàng)建解決方案,添加jquery的js和一些資源文件(如圖片和進(jìn)度條顯示等):
jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css
1、頁面的基本代碼如下
這里用的是aspx頁面(html也是也可的)
頁面中引入的js和js函數(shù)如下：
script?src="js/jquery-1.3.2.min.js"?type="text/javascript"/script??
script?src="js/jquery.uploadify.v2.1.0.js"?type="text/javascript"/script??
script?src="js/jquery.uploadify.v2.1.0.min.js"?type="text/javascript"/script??
script?src="js/swfobject.js"?type="text/javascript"/script??
link?href="css/uploadify.css"?rel="stylesheet"?type="text/css"?/??
/script
js函數(shù)：
script?type="text/javascript"??
$(document).ready(function?()?{??
$("#uploadify").uploadify({??
'uploader':?'image/uploadify.swf',??//uploadify.swf文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點(diǎn)擊后淡出打開文件對話框????????????????
'script':?'Handler1.ashx',//????script?：??后臺處理程序的相對路徑??
'cancelImg':?'image/cancel.png',??
'buttenText':?'請選擇文件',//瀏覽按鈕的文本，默認(rèn)值：BROWSE。??
'sizeLimit':999999999,//文件大小顯示??
'floder':?'Uploader',//上傳文件存放的目錄??
'queueID':?'fileQueue',//文件隊列的ID，該ID與存放文件隊列的div的ID一致??
'queueSizeLimit':?120,//上傳文件個數(shù)限制??
'progressData':?'speed',//上傳速度顯示??
'auto':?false,//是否自動上傳??
'multi':?true,//是否多文件上傳??
//'onSelect':?function?(e,?queueId,?fileObj)?{??
//????alert("唯一標(biāo)識:"?+?queueId?+?"\r\n"?+??
//??"文件名："?+?fileObj.name?+?"\r\n"?+??
//??"文件大?。??+?fileObj.size?+?"\r\n"?+??
//??"創(chuàng)建時間："?+?fileObj.creationDate?+?"\r\n"?+??
//??"最后修改時間："?+?fileObj.modificationDate?+?"\r\n"?+??
//??"文件類型："?+?fileObj.type);??
//????}??
'onQueueComplete':?function?(queueData)?{??
alert("文件上傳成功！");????????????????????
return;??
}??
});??
});
頁面中的控件代碼：
body??
form?id="form1"?runat="server"??
div?id="fileQueue"?????????
/div??
div??
p??
input?type="file"?name="uploadify"?id="uploadify"/??
input?id="Button1"?type="button"?value="上傳"?onclick="javascript:?$('#uploadify').uploadifyUpload()"?/??
input?id="Button2"?type="button"?value="取消"?onclick="javascript:$('#uploadify').uploadifyClearQueue()"?/??
/p??
/div??
/form??
/body
函數(shù)主要參數(shù)：
$(document).ready(function()?{??
$('#fileInput1').fileUpload({??
'uploader':?'uploader.swf',//不多講了??
'script':?'/AjaxByJQuery/file.do',//處理Action??
'cancelImg':?'cancel.png',??????????
'folder':?'',//服務(wù)端默認(rèn)保存路徑??
'scriptData':{'methed':'uploadFile','arg1','value1'},??
//向后臺傳遞參數(shù),methed,arg1為參數(shù)名,uploadFile,value1為對應(yīng)的參數(shù)值,服務(wù)端通過request["arg1"]??
'buttonText':'UpLoadFile',//按鈕顯示文字,不支持中文,解決方案見下??
//'buttonImg':'圖片路徑',//通過設(shè)置背景圖片解決中文問題,就是把背景圖做成按鈕的樣子??
'multi':'true',//多文件上傳開關(guān)??
'fileExt':'*.xls;*.csv',//文件過濾器??
'fileDesc':'.xls',//文件過濾器?詳解見文檔??
'onComplete'?:?function(event,queueID,file,serverData,data){???
//serverData為服務(wù)器端返回的字符串值??
alert(serverData);??
}??
});??
});
后臺一般處理文件：
using?System;??
using?System.Collections.Generic;??
using?System.Linq;??
using?System.IO;??
using?System.Net;??
using?System.Web;??
using?System.Web.Services;??
namespace?fupload??
{??
///?summary??
///?Handler1?的摘要說明??
///?/summary??
public?class?Handler1?:?IHttpHandler??
{??
public?void?ProcessRequest(HttpContext?context)??
{??
context.Response.ContentType?=?"text/plain";??
HttpPostedFile?file?=?context.Request.Files["Filedata"];//對客戶端文件的訪問??
string?uploadPath?=?HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";//服務(wù)器端文件保存路徑??
if?(file?!=?null)??
{??
if?(!Directory.Exists(uploadPath))??
{??
Directory.CreateDirectory(uploadPath);//創(chuàng)建服務(wù)端文件夾??
}??
file.SaveAs(uploadPath?+?file.FileName);//保存文件??
context.Response.Write("上傳成功");??
}??
else??
{??
context.Response.Write("0");??
}??
}??
public?bool?IsReusable??
{??
get??
{??
return?false;??
}??
}??
}??
}
以上方式基本可以實(shí)現(xiàn)多文件的上傳，大文件大小是在控制在10M以下/。
使用jquery.form.js實(shí)現(xiàn)文件上傳及進(jìn)度條前端代碼
ajax的表單提交只能提交data數(shù)據(jù)到后臺，沒法實(shí)現(xiàn)file文件的上傳還有展示進(jìn)度功能，這里用到form.js的插件來實(shí)現(xiàn)，搭配css樣式簡單易上手，而且高大上，推薦使用。
需要解釋下我的結(jié)構(gòu)， #upload-input-file 的input標(biāo)簽是真實(shí)的文件上傳按鈕，包裹form標(biāo)簽后可以實(shí)現(xiàn)上傳功能， #upload-input-btn 的button標(biāo)簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 里面， .progress 是進(jìn)度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進(jìn)度條的主體， .progress-bar-status 是進(jìn)度條的文本提醒。
去掉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)]
更多用法可以 參考官網(wǎng)
jQuery fileupload 多文件上傳
//js
$(function?()?{
//文件上傳地址
//var?url?=?'';
var?url?=?'';
//初始化，主要是設(shè)置上傳參數(shù)，以及事件處理方法(回調(diào)函數(shù))
$('#fileupload').fileupload({
autoUpload:?true,//是否自動上傳
//url:?url,//上傳地址
dataType:?'json',
done:?function?(e,?data)?{//設(shè)置文件上傳完畢事件的回調(diào)函數(shù)
//$.each(data.result.files,?function?(index,?file)?{
$("#myimg").attr({src:data.result.imgurl});
$("#myimg").css({width:"290px",height:"218px"});
//alert(data.result);
},
progressall:?function?(e,?data)?{//設(shè)置上傳進(jìn)度事件的回調(diào)函數(shù)
var?progress?=?parseInt(data.loaded?/?data.total?*?5,?10);
$('#progress?.bar').css(
'width',
progress?+?'%'
);
}
});
});?
//上傳至服務(wù)后，服務(wù)器返回json數(shù)據(jù)--上傳圖片的地址。
//html
label?for="text"上傳圖片/label
input?id="fileupload"?type="file"?name="files"?data-url="span?style="color:#ff6666;"jquery_save_img/span"?multiple
//data-url為上傳至服務(wù)器端的處理接口/地址，可替換js中的url
//服務(wù)器端
function?jquery_save_img()??
{??
$arrType=array('image/jpg','image/gif','image/png','image/bmp','image/pjpeg','image/jpeg');??
$max_size='500000000000';??????//?最大文件限制（單位：byte）??
$upfile='./uploads';?//圖片目錄路徑??
$file=$_FILES['files'];??
/*?
echo?'filename:'.$file['tmp_name'].';br?/';?
echo?'size:'.$file['size'].';br?/';?
echo?'type:'.$file['type'].';br?/';?
echo?'name:'.$file['name'].';br?/';?
*/??
if($_SERVER['REQUEST_METHOD']=='POST'){?//判斷提交方式是否為POST??
if(!is_uploaded_file($file['tmp_name'])){?//判斷上傳文件是否存在??
echo?"font?color='#FF0000'文件不存在！/font";??
exit;??
}??
if($file['size']$max_size){??//判斷文件大小是否大于500000字節(jié)??
echo?"font?color='#FF0000'上傳文件太大！/font";??
exit;??
}???
if(!in_array($file['type'],$arrType)){??//判斷圖片文件的格式??
echo?"font?color='#FF0000'上傳文件格式不對！/fontxxx:".$file['type'];??
exit;??
}??
if(!file_exists($upfile)){??//?判斷存放文件目錄是否存在??
mkdir($upfile,0777,true);??
}???
$imageSize=getimagesize($file['tmp_name']);??
$img=$imageSize[0].'*'.$imageSize[1];??
$fname=$file['name'];??
$ftype=explode('.',$fname);??
$picName=$upfile."/cloudy".$fname;??
if(file_exists($picName)){??
//echo?"font?color='#FF0000'同文件名已存在！/font";??
//exit;??
}??
if(!move_uploaded_file($file['tmp_name'],$picName)){????
echo?"font?color='#FF0000'移動文件出錯！/font";??
exit;??
}??
else{??
/*?
echo?"font?color='#FF0000'圖片文件上傳成功！/fontbr/";?
echo?"font?color='#0000FF'圖片大?。?img/fontbr/";?
echo?"圖片預(yù)覽：brdiv?style='border:#F00?1px?solid;?width:200px;height:200px'?
img?src=\"".$picName."\"?width=200px?height=200px".$fname."/div";?
*/??
echo?'{"imgurl":"'.$fname.'"}';??
}??
}??
}
jquery file upload怎么使用
使用方法：
1. 需要加載的js文件：
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
2. html代碼：
?
1
input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple
3. js代碼：
?
12345678910
$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('p/').text(file.name).appendTo(document.body);});}});});
3.1 顯示上傳進(jìn)度條：
?
123456789
$('#fileupload').fileupload({ progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); } });
3.2 需要一個div容器用來顯示進(jìn)：
?
123
div id="progress" div class="bar" style="width: 0%;"/div /div
4. API
4.1 Initialization：
在上傳按鈕上調(diào)用fileupload()方法;
示例：
$('#fileupload').fileupload();
4.2 Options :
1: url：請求發(fā)送的目標(biāo)url
Type: string
Example: '/path/to/upload/handler.json'
2.Type: 文件上傳HTTP請求方式，可以選擇“POST”，“PUT”或者"PATCH",
默認(rèn)"POST"
Type: string
Example: 'PUT'
3. dataType:希望從服務(wù)器返回的數(shù)據(jù)類型，默認(rèn)"json"
Type: string
Example: 'json'
4. autoUpload:默認(rèn)情況下，只要用戶點(diǎn)擊了開始按鈕被添加至組件的文件會立即上傳。將autoUpload值設(shè)為true可以自動上傳。
Type: boolean
Default: true
5. acceptFileTypes：允許上傳的的文件類型
Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i
6. maxFileSize: 最大上傳文件大小
Example: 999000 (999KB) //單位：B
7. minFileSize:最小上傳文件大小
Example: 100000 (100KB) //單位：B
8.previewMaxWidth : 圖片預(yù)覽區(qū)域最大寬度
Example: 100 //單位：px
4.3 Callback Options:
使用方法一：函數(shù)屬性
實(shí)例：
?
123456789101112
$('#fileupload').fileupload({drop: function (e, data) {$.each(data.files, function (index, file) {alert('Dropped file: ' + file.name);});},change: function (e, data) {$.each(data.files, function (index, file) {alert('Selected file: ' + file.name);});}});
使用方法二：綁定事件監(jiān)聽函數(shù)
實(shí)例：
?
123
$('#fileupload').bind('fileuploaddrop', function (e, data) {/* ... */}).bind('fileuploadchange', function (e, data) {/* ... */});
每個事件名稱都添加前綴：”fileupload”;
注意推薦使用第二種方法。
常用的回調(diào)函數(shù)：
1. add: 當(dāng)文件被添加到上傳組件時被觸發(fā)
?
1
$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});
或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});
2. processalways: 當(dāng)一個單獨(dú)的文件處理隊列結(jié)束（完成或失敗時）觸發(fā)
3. progressall: 全局上傳處理事件的回調(diào)函數(shù)
Example:
?
1234567
$('#fileupload').on('fileuploadprogressall', function (e, data) { //進(jìn)度條顯示var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar').css('width',progress + '%');});
4. fail : 上傳請求失敗時觸發(fā)的回調(diào)函數(shù)，如果服務(wù)器返回一個帶有error屬性的json響應(yīng)這個函數(shù)將不會被觸發(fā)。
5. done : 上傳請求成功時觸發(fā)的回調(diào)函數(shù)，如果服務(wù)器返回一個帶有error屬性的json響應(yīng)這個函數(shù)也會被觸發(fā)。
6. always : 上傳請求結(jié)束時（成功，錯誤或者中止）都會被觸發(fā)。
當(dāng)前題目：jquery上傳文件,jquery上傳文件進(jìn)度條
文章位置：http://www.dlmjj.cn/article/dsgshcj.html
