本篇文章給大家分享的是有關(guān)ajax異步上傳帶進(jìn)度條視頻并提取縮略圖的示例分析，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
在雙清等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站,成都外貿(mào)網(wǎng)站建設(shè)公司,雙清網(wǎng)站建設(shè)費(fèi)用合理。
最近在做一個(gè)集富媒體功能于一身的項(xiàng)目。需要上傳視頻。這里我希望做成異步上傳，并且有進(jìn)度條，響應(yīng)有狀態(tài)碼，視頻連接，縮略圖。
服務(wù)端響應(yīng)
重慶分公司
重慶分公司
{
"thumbnail": "/slsxpt//upload/thumbnail/fdceefc.jpg",
"success": true,
"link": "/slsxpt//upload/video/fdceefc.mp"
}并且希望我的input file控件不要被form標(biāo)簽包裹。原因是form中不能嵌套form，另外form標(biāo)簽在瀏覽器了還是有一點(diǎn)點(diǎn)默認(rèn)樣式的，搞不好又要寫css。
以前用ajaxFileUpload做過文件異步上傳。不過這個(gè)東西好久未更新，代碼還有bug，雖然最后勉強(qiáng)成功用上了，但總覺不好。而且ajaxFileUpload沒有直接添加xhr2的progress事件響應(yīng)，比較麻煩。
上網(wǎng)找了一下，發(fā)現(xiàn)方法都是很多。
比如在文件上傳后，將上傳進(jìn)度放到session中，輪詢服務(wù)器session。但我總覺的這個(gè)方法有問題，我認(rèn)為這種方法看到的進(jìn)度，應(yīng)該是我的服務(wù)端應(yīng)用程序代碼（我的也就是action）從服務(wù)器的臨時(shí)目錄復(fù)制文件的進(jìn)度，因?yàn)樗姓埱蠖紤?yīng)該先提交給服務(wù)器軟件，也就是tomcat，tomcat對請求進(jìn)行封裝session，request等對象，并且文件實(shí)際上也應(yīng)該是它來接收的。也就是說在我的action代碼執(zhí)行之前，文件實(shí)際上已經(jīng)上傳完畢了。
后來找到個(gè)比較好的方法使用 jquery.form.js插件的ajaxSubmit方法。這個(gè)方法以表單來提交，也就是 $.fn.ajaxSubmit.：$(form selector).ajaxSubmit({})，這個(gè)api的好處是它已經(jīng)對xhr2的progress時(shí)間進(jìn)行了處理，可以在調(diào)用時(shí)傳遞一個(gè)uploadProgress的function，在function里就能夠拿到進(jìn)度。而且如果不想input file被form包裹也沒關(guān)系，在代碼里createElement應(yīng)該可以。不過這個(gè)方法我因?yàn)榉噶藗€(gè)小錯誤最后沒有成功，可惜了。
ajaxSubmit源碼
最后，還是使用了$.ajax 方法來做。$.ajax 不需要關(guān)聯(lián)form，有點(diǎn)像個(gè)靜態(tài)方法哦。唯一的遺憾就是$.ajax options里沒有對progress的響應(yīng)。不過它有一個(gè)參數(shù)為 xhr ,也就是你可以定制xhr，那么久可以通過xhr添加progress的事件處理程序。再結(jié)合看一看ajaxSubmit方法里對progress事件的處理，頓時(shí)豁然開朗
那么我也可以在$.ajax 方法中添加progress事件處理函數(shù)了。為了把對dom的操作從上傳業(yè)務(wù)中抽取出來，我決定以插件的形式寫。下面是插件的代碼
;(function ($) {
var defaults = {
uploadProgress : null,
beforeSend : null,
success : null,
},
setting = {
};
var upload = function($this){
$this.parent().on('change',$this,function(event){
//var $this = $(event.target),
var formData = new FormData(),
target = event.target || event.srcElement;
//$.each(target.files, function(key, value)
//{
// console.log(key);
// formData.append(key, value);
//});
formData.append('file',target.files[]);
settings.fileType && formData.append('fileType',settings.fileType);
$.ajax({
url : $this.data('url'),
type : "POST",
data : formData,
dataType : 'json',
processData : false,
contentType : false,
cache : false,
beforeSend : function(){
//console.log('start');
if(settings.beforeSend){
settings.beforeSend();
}
},
xhr : function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload){
xhr.upload.addEventListener('progress',function(event){
var total = event.total,
position = event.loaded || event.position,
percent = ;
if(event.lengthComputable){
percent = Math.ceil(position / total * );
}
if(settings.uploadProgress){
settings.uploadProgress(event, position, total, percent);
}
}, false);
}
return xhr;
},
success : function(data,status,jXhr){
if(settings.success){
settings.success(data);
}
},
error : function(jXhr,status,error){
if(settings.error){
settings.error(jXhr,status,error);
}
}
});
});
};
$.fn.uploadFile = function (options) {
settings = $.extend({}, defaults, options);
// 文件上傳
return this.each(function(){
upload($(this));
});
}
})($ || jQuery);下面就可以在我的jsp頁面里面使用這個(gè)api了。
