JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法


Posted in Javascript onJune 19, 2017

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

// 上传目标触发点 
<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,压缩包等),图片,视频功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
javascript编程起步(第七课)
Jan 10 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 #Javascript
jQuery自定义多选下拉框效果
Jun 19 #jQuery
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 #Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 #Javascript
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
微信小程序实现皮肤功能(夜间模式)
Jun 18 #Javascript
关于javascript作用域的常见面试题分享
Jun 18 #Javascript
You might like
PHP经典的给图片加水印程序
2006/12/06 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
js 事件小结 表格区别
2007/08/13 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python版微信红包分配算法
2015/05/04 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
出纳岗位职责范本
2013/12/01 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
如何写股份合作协议书
2014/09/11 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
在职证明书模板
2015/06/15 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js