1. // 上传目标触发点
  2. <input type="file" class="upvideo" name="upvideo" id="fileupload1" />
  3. // 引入插件
  4. <script type="text/javascript" src="{$IMG}/bstage/js/jquery.form.js" language="javascript"></script>
  5. /**方法调用**/
  6. setFileUpload({
  7.  name: 'fileupload1',
  8.  backfun: upback1,
  9.  beforefun: checkUp1,
  10.  loadfun:loadup,
  11.  phpUrl: '/ossphp/php/get.php?ft=video'
  12. });
  13. // 上传前验证
  14. function checkUp1(n){
  15.  // 查看视频大小(mb)
  16.  var fileObj = document.getElementById(n).files[];
  17.  var relSize = parseInt(fileObj.size//);
  18.  if(relSize > ){ // 大于10mb
  19.   alert('提示','视屏超过10MB,请重新上传！');
  20.   return false;
  21.  }
  22.  // 查看视频类型
  23.  var tv_id =document.getElementById(n).value;//根据id得到值
  24.  var index= tv_id.indexOf(".");
  25.  tv_id=tv_id.substring(index).toLowerCase();
  26.  if(tv_id!=".rb"&&tv_id!=".rmvb"&&tv_id!=".mp4"&&tv_id!=".flv"){
  27.   alert("提示","不是指定视频格式,重新选择");
  28.   return false;
  29.  }
  30.  return true;
  31. }
  32. //上传中
  33. function loadup(){
  34. }
  35. // 上传成功后操作
  36. function upback1(data){
  37.  // data 成功后的参数
  38. }
  39. /**上传功能封装**/
  40. function setFileUpload(options){
  41.  var n = options.name;
  42.  var phpUrl = options.phpUrl;
  43.  var backfun = options.backfun;
  44.  var beforefun = options.beforefun;
  45.  var loadfun = options.loadfun;
  46.  var accessid = '';
  47.  var accesskey = '';
  48.  var host = '';
  49.  var policyBase64 = '';
  50.  var signature = '';
  51.  var callbackbody = '';
  52.  var filename = '';
  53.  var dirname = '';
  54.  var expire = ;
  55.  var upflag = true;
  56.  if(phpUrl==null || phpUrl==''){console.log('phpurl is null');return false;}
  57.  if(n==null || n==''){console.log('object is null');return false;}
  58.  var backfun1 = $.isFunction(backfun) ?
  59.       backfun :
  60.       function(success, error){
  61.        console.log('no backfun');
  62.       };
  63.  var beforefun1 = $.isFunction(beforefun) ?
  64.       beforefun :
  65.       function(success, error){
  66.        return true;
  67.       };
  68.  var loadfun1 = $.isFunction(loadfun) ?
  69.       loadfun :
  70.       function(success, error){
  71.        return true;
  72.       };
  73.  var obj = $('#'+n);
  74.  obj.change(function(){
  75.   if(beforefun1(n)){
  76.    if(n=="fileupload1"){
  77.     fileEmb1(n);
  78.    }else if(n == 'fileupload2'){
  79.     fileEmb2(n);
  80.    }else if(n == 'fileupload3'){
  81.     fileEmb3(n);
  82.    }
  83.   }
  84.  });
  85.  function fileEmb1(n){
  86.   //oss add
  87.   $("#"+n).attr('name','file');
  88.   var file1 = $("#"+n).val();
  89.   var fileName = getFileName(file1);
  90.   phpUrl = phpUrl + '&fname='+fileName;
  91.   get_signature();
  92.   var ldot = fileName.lastIndexOf(".");
  93.   var filetype = fileName.substring(ldot + );
  94.   $("#"+n).wrap("<form id='myupload1' action='"+host+"' method='post' enctype='multipart/form-data'></form>");
  95.   $("#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>");
  96.   //speed_width进度条类
  97.   //percent进度数字类
  98.   //load_content上传区域
  99.   $('#myupload1').ajaxSubmit({
  100.    dataType: 'json', //数据格式为json
  101.    data:'',
  102.    beforeSend: function() {
  103.     loadfun1();
  104.     if(!upflag)return false;
  105.     upflag=false;
  106.    },
  107.    uploadProgress: function(event, position, total, percentComplete) {
  108.     $('.upck_b').hide();
  109.     $('.videspeed').show();
  110.     percentComplete = percentComplete>=?:percentComplete;
  111.     var percentVal = percentComplete + '%'; //获得进度
  112.     $('.speed_num').css('width',percentVal);
  113.     $('.persent_em').html(percentComplete);
  114.    },
  115.    success: function(data) { //成功
  116.      $('.load_content').html('<em >图片上传</em>');
  117.      //上传成功后还原
  118.      $("#"+n).attr('name','');
  119.      setFileUpload(options);
  120.      upflag=true;
  121.      backfun1(data);
  122.    },
  123.    error:function(xhr){ //上传失败
  124.     $('.load_content').html('<em >图片上传</em>');
  125.     upflag=true;
  126.    }
  127.   });
  128.  }
  129.  function getFileName(path){
  130.   var pos1 = path.lastIndexOf('/');
  131.   var pos2 = path.lastIndexOf('\\');
  132.   var pos = Math.max(pos1, pos2)
  133.   if( pos< )
  134.    return path;
  135.   else
  136.    return path.substring(pos+);
  137.  }
  138.  now = timestamp = Date.parse(new Date()) / ;
  139.  new_multipart_params = '';
  140.  function send_request(){
  141.   var xmlhttp = null;
  142.   if (window.XMLHttpRequest)
  143.   {
  144.    xmlhttp=new XMLHttpRequest();
  145.   }
  146.   else if (window.ActiveXObject)
  147.   {
  148.    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  149.   }
  150.   if (xmlhttp!=null && phpUrl)
  151.   {
  152.    //phpUrl = '/ossphp/php/get.php?ft=resources';
  153.    xmlhttp.open( "GET", phpUrl, false );
  154.    xmlhttp.send( null );
  155.    return xmlhttp.responseText;
  156.   }
  157.   else
  158.   {
  159.    alert("Your browser does not support XMLHTTP.");
  160.   }
  161.  };
  162.  function get_signature()
  163.  {
  164.   //可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲
  165.   now = timestamp = Date.parse(new Date()) / ;
  166.   //if (expire < now + 3)
  167.   //{
  168.    body = send_request()
  169.    var obj = eval ("(" + body + ")");
  170.    host = obj['host']
  171.    policyBase64 = obj['policy']
  172.    accessid = obj['accessid']
  173.    signature = obj['signature']
  174.    expire = parseInt(obj['expire'])
  175.    callbackbody = obj['callback']
  176.    dirname = obj['dir']
  177.    return true;
  178.   //}
  179.  };
  180. }
// 上传目标触发点
<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 19th, 2018 Week 8th Monday

    Love is blind, hard to find, difficult to get, and impossible to forget. 爱,很盲目,很难找,很难得,很难忘. It is al ...

  2. 【递推】ZSC1074: 数学、阿牛的EOF牛肉串

    Description 今年的ACM暑期集训队一共有18人,分为6支队伍.其中有一个叫做EOF的队伍,由04级的阿牛.XC以及05级的COY组成.在共同的集训生活中,大家建立了深厚的友谊,阿牛准备做点 ...

  3. 《数据库技术基础与应用（第2版）》学习笔记——第7章~

    从这章开始,操作的内容开始增多,概念的东西越来越少,可能跟学校的教学目的有关,但是跟我的学习目的不匹配,就不再继续整理. 总结:这本书适合大学本科生学习和了解数据库的相关知识以及Access和SQL ...

  4. BZOJ2521:[SHOI2010]最小生成树(最小割)

    Description Secsa最近对最小生成树问题特别感兴趣.他已经知道如果要去求出一个n个点.m条边的无向图的最小生成树有一个Krustal算法和另一个Prim的算法.另外,他还知道,某一个图可 ...

  5. 深入解读RabbitMQ工作原理及简单使用

    RabbitMQ系列目录 RabbitMQ在Ubuntu上的环境搭建 深入解读RabbitMQ工作原理及简单使用 Rabbit的几种工作模式介绍与实践 Rabbit事务与消息确认 Rabbit集群搭建 ...

  6. SpringMVC配置多视图-内容协商原理

    SpringMVC配置多视图-内容协商原理 2014年03月06日 16:46:59 日积月累_滴水石穿 阅读数:10964更多 个人分类: SpringMVC   Spring Framework ...

  7. Java8之lambda表达式

    一.什么是lambda表达式? Lambda 是一个匿名函数,我们可以把 Lambda 表达式理解为是一段可以传递的代码(将代码像数据一样进行传递).可以写出更简洁.更灵活的代码.作为一种更紧凑的代码 ...

  8. 用 Django 管理现有数据库

    在多数项目中,总有一些几乎一成不变的 CRUD 操作,编写这些代码很无聊,但又是整个系统必不可少的功能之一.我们在上一个项目中也面临类似的问题,虽然已经实现了一个功能相对完整的管理后台,也尽量做到了代 ...

  9. BZOJ1064 NOI2008 假面舞会 图论

    传送门 将一组关系\((A,B)\)之间连一条边,那么显然如果图中存在环长为\(len\)的环,那么面具的种数一定是\(len\)的因数. 值得注意的是这里环的关系除了\(A \rightarrow ...

  10. JVM调优常用参数和注意点备忘录

    本文主要是工作过程中总结的一些jvm调优的参数和注意的地方,作为一个备忘录,先占个坑,有时间在来细化具体的实例. gc日志是覆盖的方式如果文件名字固定会导致上一次被覆盖可以采用这个-Xloggc:ba ...