当前位置: 首页 > 工具软件 > PSD.rb > 使用案例 >

javascript 上传文件(psd,压缩包等),图片,视频

汪和悌
2023-12-01
// 上传目标触发点
<input type="file" class="upvideo" name="upvideo" id="fileupload1" />
// 引入插件
<script type="text/javascript" src="{$IMG}/bstage/js/jquery.form.js" language="javascript"></script>

/**方法调用**/
setFileUpload({
	name: 'fileupload1',	 
	backfun: upback1,	
	beforefun: checkUp1,
	loadfun:loadup,
	phpUrl: '/ossphp/php/get.php?ft=video'
}); 

// 上传前验证
function checkUp1(n){ 
	
	// 查看视频大小(mb)
	var fileObj = document.getElementById(n).files[0];
	var relSize = parseInt(fileObj.size/1024/1024);
	if(relSize > 10){   // 大于10mb
		alert('提示','视屏超过10MB,请重新上传!');
		return false;
	}
	
	// 查看视频类型
	var tv_id =document.getElementById(n).value;//根据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 成功后的参数
}	


/**上传功能封装**/
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进度条类
		//percent进度数字类
		//load_content上传区域
		$('#myupload1').ajaxSubmit({
			dataType:  'json',	//数据格式为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 + '%';	//获得进度	
			 	$('.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()
	{
	    //可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.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;
	    //} 
	};
} 

注:里面的细节还可以继续封装

 类似资料: