// 上传目标触发点
<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. 日志收集(ElasticSearch)串联查询 MDC

    之前写过将应用程序或服务程序产生的日志直接写入搜索引擎的博客 其中基本过程就是  app->redis->logstash->elasticsearch 整个链路过程  本来想将re ...

  2. html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  3. E. Superhero Battle Codeforces Round #547 (Div. 3) 思维题

    E. Superhero Battle time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. centos7下如何隐藏nginx的版本号

    我们在访问nginx的时候会暴露nginx的版本号,如何将这些版本号隐藏呢? 其实隐藏版本号非常简单 在nginx的配置文件中添加一个server——tokens  off:参数就可以了,下面进行操作 ...

  5. 【Java基础】char

    1.JAVA中,char占2字节,16位.可在存放汉字 2.char赋值 char a='a';  //任意单个字符,加单引号. char a='中';//任意单个中文字,加单引号. char a=1 ...

  6. UVA11400-Lighting System Design(动态规划基础)

    Problem UVA11400-Lighting System Design Accept: 654  Submit: 4654Time Limit: 3000 mSec Problem Descr ...

  7. ASP.NET MVC]WebAPI应用支持HTTPS的经验总结

    WebAPI应用支持HTTPS的经验总结 在我前面介绍的WebAPI文章里面,介绍了WebAPI的架构设计方面的内容,其中提出了现在流行的WebAPI优先的路线,这种也是我们开发多应用(APP.微信. ...

  8. ElasticSearch(站内搜索) 转发 https://www.cnblogs.com/xibei666/p/5929970.html

    简介 Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据.它可以用于全文搜索,结构化搜索以及分析,当然你也可以将这三者进行组合.Elasticse ...

  9. 解决Nginx+Tomcat下客户端https请求跳转成http的问题

    Nginx上开启https,  后端使用Tomcat,  两者间走http协议, 但发现如果tomcat应用存在跳转时, 则客户端浏览器会出现400 Bad Request的错误, 通过抓包发现原因是 ...

  10. Python脱产8期 Day08 2019/4/22

    一.三种字符串 1.普通字符串:u'以字符作为输出单位‘  #print(u‘abc’)#用于显示 2.二进制字符串:b'以字节作为输出单位’#用于传输 3.原义字符串:r‘以字符作为输出单位,原样输 ...