JavaScript 上傳文件(psd,壓縮包等),圖片,視頻的實(shí)現(xiàn)方法
廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:
// 上傳目標(biāo)觸發(fā)點(diǎn)
<input type="file" class="upvideo" name="upvideo" id="fileupload1" />
// 引入插件
<script type="text/javascript" src="{$IMG}/bstage/js/jquery.form.js" language="javascript"></script>
/**方法調(diào)用**/
setFileUpload({
name: 'fileupload1',
backfun: upback1,
beforefun: checkUp1,
loadfun:loadup,
phpUrl: '/ossphp/php/get.php?ft=video'
});
// 上傳前驗(yàn)證
function checkUp1(n){
// 查看視頻大小(mb)
var fileObj = document.getElementById(n).files[0];
var relSize = parseInt(fileObj.size/1024/1024);
if(relSize > 10){ // 大于10mb
alert('提示','視屏超過10MB,請(qǐng)重新上傳!');
return false;
}
// 查看視頻類型
var tv_id =document.getElementById(n).value;//根據(jù)id得到值
var index= tv_id.indexOf(".");
tv_id=tv_id.substring(index).toLowerCase();
if(tv_id!=".rb"&&tv_id!=".rmvb"&&tv_id!=".mp4"&&tv_id!=".flv"){
alert("提示","不是指定視頻格式,重新選擇");
return false;
}
return true;
}
//上傳中
function loadup(){
}
// 上傳成功后操作
function upback1(data){
// data 成功后的參數(shù)
}
/**上傳功能封裝**/
function setFileUpload(options){
var n = options.name;
var phpUrl = options.phpUrl;
var backfun = options.backfun;
var beforefun = options.beforefun;
var loadfun = options.loadfun;
var accessid = '';
var accesskey = '';
var host = '';
var policyBase64 = '';
var signature = '';
var callbackbody = '';
var filename = '';
var dirname = '';
var expire = 0;
var upflag = true;
if(phpUrl==null || phpUrl==''){console.log('phpurl is null');return false;}
if(n==null || n==''){console.log('object is null');return false;}
var backfun1 = $.isFunction(backfun) ?
backfun :
function(success, error){
console.log('no backfun');
};
var beforefun1 = $.isFunction(beforefun) ?
beforefun :
function(success, error){
return true;
};
var loadfun1 = $.isFunction(loadfun) ?
loadfun :
function(success, error){
return true;
};
var obj = $('#'+n);
obj.change(function(){
if(beforefun1(n)){
if(n=="fileupload1"){
fileEmb1(n);
}else if(n == 'fileupload2'){
fileEmb2(n);
}else if(n == 'fileupload3'){
fileEmb3(n);
}
}
});
function fileEmb1(n){
//oss add
$("#"+n).attr('name','file');
var file1 = $("#"+n).val();
var fileName = getFileName(file1);
phpUrl = phpUrl + '&fname='+fileName;
get_signature();
var ldot = fileName.lastIndexOf(".");
var filetype = fileName.substring(ldot + 1);
$("#"+n).wrap("<form id='myupload1' action='"+host+"' method='post' enctype='multipart/form-data'></form>");
$("#myupload1").prepend("<input type='hidden' value='' name='name' id='name'></input><input type='hidden' value='"+dirname+"."+filetype+"' name='key' ></input><input type='hidden' value='"+policyBase64+"' name='policy' id='policy'></input><input type='hidden' value='"+accessid+"' name='OSSAccessKeyId' id='OSSAccessKeyId'></input><input type='hidden' value='200' name='success_action_status' id='success_action_status' ></input><input type='hidden' value='"+callbackbody+"' name='callback' id='callback'></input><input type='hidden' value='"+signature+"' name='signature' id='signature'></input>");
//speed_width進(jìn)度條類
//percent進(jìn)度數(shù)字類
//load_content上傳區(qū)域
$('#myupload1').ajaxSubmit({
dataType: 'json', //數(shù)據(jù)格式為json
data:'',
beforeSend: function() {
loadfun1();
if(!upflag)return false;
upflag=false;
},
uploadProgress: function(event, position, total, percentComplete) {
$('.upck_b').hide();
$('.videspeed').show();
percentComplete = percentComplete>=100?99:percentComplete;
var percentVal = percentComplete + '%'; //獲得進(jìn)度
$('.speed_num').css('width',percentVal);
$('.persent_em').html(percentComplete);
},
success: function(data) { //成功
$('.load_content').html('<em >圖片上傳</em>');
//上傳成功后還原
$("#"+n).attr('name','');
setFileUpload(options);
upflag=true;
backfun1(data);
},
error:function(xhr){ //上傳失敗
$('.load_content').html('<em >圖片上傳</em>');
upflag=true;
}
});
}
function getFileName(path){
var pos1 = path.lastIndexOf('/');
var pos2 = path.lastIndexOf('\\');
var pos = Math.max(pos1, pos2)
if( pos<0 )
return path;
else
return path.substring(pos+1);
}
now = timestamp = Date.parse(new Date()) / 1000;
new_multipart_params = '';
function send_request(){
var xmlhttp = null;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null && phpUrl)
{
//phpUrl = '/ossphp/php/get.php?ft=resources';
xmlhttp.open( "GET", phpUrl, false );
xmlhttp.send( null );
return xmlhttp.responseText;
}
else
{
alert("Your browser does not support XMLHTTP.");
}
};
function get_signature()
{
//可以判斷當(dāng)前expire是否超過了當(dāng)前時(shí)間,如果超過了當(dāng)前時(shí)間,就重新取一下.3s 做為緩沖
now = timestamp = Date.parse(new Date()) / 1000;
//if (expire < now + 3)
//{
body = send_request()
var obj = eval ("(" + body + ")");
host = obj['host']
policyBase64 = obj['policy']
accessid = obj['accessid']
signature = obj['signature']
expire = parseInt(obj['expire'])
callbackbody = obj['callback']
dirname = obj['dir']
return true;
//}
};
}
注:里面的細(xì)節(jié)還可以繼續(xù)封裝
以上所述是小編給大家介紹的JavaScript 上傳文件(psd,壓縮包等),圖片,視頻功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
如何使用webpack5+TypeScript+npm發(fā)布組件庫
這篇文章主要介紹了如何使用webpack5+TypeScript+npm發(fā)布組件庫,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04
JS基于MSClass和setInterval實(shí)現(xiàn)ajax定時(shí)采集信息并滾動(dòng)顯示的方法
這篇文章主要介紹了JS基于MSClass和setInterval實(shí)現(xiàn)ajax定時(shí)采集信息并滾動(dòng)顯示的方法,涉及JavaScript頁面元素定時(shí)滾動(dòng)操作及ajax調(diào)用實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-04-04
JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行
這篇文章主要介紹了JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
Bootstrap3使用typeahead插件實(shí)現(xiàn)自動(dòng)補(bǔ)全功能
這篇文章主要介紹了Bootstrap3使用typeahead插件實(shí)現(xiàn)自動(dòng)補(bǔ)全功能的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
微信小程序開發(fā)之tabbar圖標(biāo)和顏色的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序開發(fā)之tabbar圖標(biāo)和顏色的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
微信小程序網(wǎng)絡(luò)層封裝的實(shí)現(xiàn)(promise, 登錄鎖)
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)層封裝(promise, 登錄鎖),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
微信小程序多列表渲染數(shù)據(jù)開關(guān)互不影響的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序多列表渲染數(shù)據(jù)開關(guān)互不影響的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
詳解CocosCreator項(xiàng)目結(jié)構(gòu)機(jī)制
這篇文章主要介紹了詳解CocosCreator項(xiàng)目結(jié)構(gòu)機(jī)制,只有了解這些機(jī)制后,才能更好的進(jìn)行項(xiàng)目開發(fā),避免潛在錯(cuò)誤,并且快速的除錯(cuò)2021-04-04

