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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
微信开发 微信授权详解
Oct 21 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
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通过ajax实现双击table修改内容
2014/04/28 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
javascript获取web应用根目录的方法
2014/02/12 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
React Native预设占位placeholder的使用
2017/09/28 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
Python中的is和id用法分析
2015/01/26 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python随机取list中的元素方法
2018/04/08 Python
python实现汉诺塔算法
2021/03/01 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python Json数据文件操作原理解析
2020/05/09 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
如何利用Python识别图片中的文字
2020/05/31 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
秘书英文求职信范文
2014/01/31 职场文书
文明寝室标语
2014/06/13 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
领导干部学习心得体会
2016/01/23 职场文书
八年级语文教学反思
2016/03/03 职场文书
创业计划书之酒厂
2019/10/14 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python