// 上传目标触发点
<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[];
var relSize = parseInt(fileObj.size//);
if(relSize > ){ // 大于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 = ;
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 + );
$("#"+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>=?: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< )
return path;
else
return path.substring(pos+);
}
now = timestamp = Date.parse(new Date()) / ;
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()) / ;
//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;
//}
};
}
// 上传目标触发点
<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;
  //}
 };
}

js上传视频(jquery.form.js)的更多相关文章

  1. 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问

    利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...

  2. 文件上传功能 -- jquery.form.js/springmvc

    距离上一篇 文件上传下载样式 -- bootstrap(http://www.cnblogs.com/thomascui/p/5370947.html)已经三周时间了,期间一直考虑怎么样给大家提交一篇 ...

  3. JQuery文件上传插件JQuery.upload.js的用法简介

    JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...

  4. 图片裁剪上传插件——jquery.photoClip.js

    想要裁剪图片上传: 需要依赖的的插件为: [jquery.photoClip.js] 插件[iscroll-zoom.js] 插件[hammer.js] 插件 [lrz.all.bundle.js] ...

  5. js 上传文件模拟Form 表单

    使用FormData对象 在本文章中 创建一个FormData对象 使用HTML表单来初始化一个FormData对象 使用FormData对象发送文件 利用FormData对象,你可以使用一系列的键值 ...

  6. jquery.form.js笔记

    由于项目的原因,需要异步上传文件,网上找了找,很多都是用jquery.form插件的,于是乎找资料,调代码,做点小笔记. 官方资料:http://www.malsup.com/jquery/form/ ...

  7. jquery提交form表单插件jquery.form.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Ajax提交form表单内容和文件(jQuery.form.js)

    jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...

  9. jquery.form.js实现异步上传

    前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...

随机推荐

  1. February 22nd, 2018 Week 8th Thursday

    Confine yourself to the present. 着眼当下. The morning wind spreads its fresh smell, we should get up an ...

  2. 使用Razor Generator构建模块化ASP.NET MVC应用程序

    在构建Web应用程序的时候,我们很难做到模块化的开发,这是因为Web应用程序不仅仅包含编译的C#代码,还包含了js.css和aspx等资源. 在ASP.NET MVC中,我们发布应用程序的时候,还会包 ...

  3. C#基础知识之键盘对应的键值

    1.一般的按键禁用 一般的按键禁用只要找出相应的keycode禁用即可.例如:window.event.keyCode==13 //Enter键 其他可以对照一下的keyCode进行选择. 字母和数字 ...

  4. linux中如何查看进程的启动时间

    ps -p PID -o lstart 其中PID是进程的pid [root@lvs-a logs]# -o lstart STARTED Tue Oct ::

  5. 【CQOI2006】凸多边形

    1713 -- [CQOI2006]凸多边形 Description 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. Input ...

  6. 5.04-requests_cookies

    import requests # 请求数据url member_url = 'https://www.yaozh.com/member/' headers = { 'User-Agent': 'Mo ...

  7. setjmp/longjmp

    1.setjmp/longjmp属于传统的错误处理 2.setjmp/longjmp是对goto语句的补充,goto仅仅能实现局部跳转.setjmp/longjmp能够实现全局跳转 3.setjmp/ ...

  8. tomcat的webapps目录中的abc.war

    1  在tomcat的webapps目录中,会有类似abc.war类型的文件,在tomcat启动时会自动解压为abc目录. 2  如果tomcat在运行中,不要直接删除abc.war文件,删除后,ab ...

  9. flask-sqlalchemy中Datetime的创建时间、修改时间,default,server_default,onupdate

    记录第一次创建时间,default falsk中如下两个字段 create_time1 = db.Column(db.DateTime, default=datetime.now) create_ti ...

  10. Spring Security(二十):6.2.3 Form and Basic Login Options

    You might be wondering where the login form came from when you were prompted to log in, since we mad ...