废话不多说了，直接给大家贴代码了，具体代码如下所示：

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

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

以上所述是小编给大家介绍的JavaScript 上传文件(psd,压缩包等),图片,视频功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js  # 上传文件  # 基于JS实现视频上传显示进度条  # nodejs实现截取上传视频中一帧作为预览图片  # js实现带进度条提示的多视频上传功能  # JavaScript中使用webuploader实现上传视频功能(demo)  # javascript前端实现多视频上传  # 上传  # 给大家  # 小编  # 图片上传  # 超过了  # 还可以  # 在此  # 说了  # 不多  # 所示  # 压缩包  # 所述  # 给我留言  # 感谢大家  # 格式为  # 疑问请  # 有任何  # 视屏  # 进度条 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  EditPlus中的正则表达式 实战(2)  LinuxShell函数封装方法_脚本复用设计思路【教程】  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  iOS发送验证码倒计时应用  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)  Laravel如何为API编写文档_Laravel API文档生成与维护方法  EditPlus中的正则表达式 实战(1)  香港服务器租用每月最低只需15元？  如何快速查询网站的真实建站时间？  深入理解Android中的xmlns:tools属性  香港服务器WordPress建站指南：SEO优化与高效部署策略  使用spring连接及操作mongodb3.0实例  如何在万网利用已有域名快速建站？  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  如何用PHP快速搭建CMS系统？  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  高端建站三要素：定制模板、企业官网与响应式设计优化  PHP正则匹配日期和时间(时间戳转换)的实例代码  郑州企业网站制作公司,郑州招聘网站有哪些？  JavaScript Ajax实现异步通信  英语简历制作免费网站推荐,如何将简历翻译成英文？  Laravel如何创建自定义Facades？（详细步骤）  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  Windows10如何删除恢复分区_Win10 Diskpart命令强制删除分区  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  如何在宝塔面板中修改默认建站目录？  如何快速生成ASP一键建站模板并优化安全性？  如何用IIS7快速搭建并优化网站站点？  Laravel如何实现数据库事务？（DB Facade示例）  如何快速搭建高效可靠的建站解决方案？  jquery插件bootstrapValidator表单验证详解  JS去除重复并统计数量的实现方法  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  Laravel怎么使用artisan命令缓存配置和视图  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  黑客入侵网站服务器的常见手法有哪些？  零基础网站服务器架设实战：轻量应用与域名解析配置指南  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  如何在局域网内绑定自建网站域名？  三星网站视频制作教程下载,三星w23网页如何全屏？  手机软键盘弹出时影响布局的解决方法  如何用虚拟主机快速搭建网站？详细步骤解析  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  5种Android数据存储方式汇总