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

迈不过友情╰ 2022-06-14 11:19 133阅读 0赞

// 上传目标触发点
    <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;
    	    //} 
    	};
    }

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