Women might be on a more even footing at work but at home their careers tend to take a back seat to their husband's job with women most likely to quit when both are working long hours, according to a U.S. study.

美国一项研究显示，如今女性在职场中的地位可能有所提高，但在家里，她们的事业相比于丈夫而言仍处于次要地位。当夫妻双方的工作时间都很长的情况下，女方辞去工作的可能性更大。

这里的"take a back seat"就是"允许他人领先,甘愿居于人下,退居幕后"的意思.

To allow somebody else to play a more active and important role in a particular situation than you do.

After forty years in the business, it's time for me to take a back seat and let someone younger take over.

在商海中拼杀了40年,现在我该退居二线,让年轻人来接班了.

1.面试的时候  会碰见这样的问题 如何让一个宽高200px的div居于屏幕正中间  上下都居中的意思
 
看到这样的题目 很开心  直接就开些写了 
 
<style>
       div:{

            width:200px;

            height:200px;

            border:1px solid #f00;

             position:absolute;

             top:50%;

             left:50%;

             margin-top:-100px;

            margin-left:-100px;

    }


</style>
 
这样就完成了 上面的问题
 
2.但面试官 如果你很快就完成了 面试 官可能就会加大难度  如果css玩的好的话 上面的问题 很简单
 
接下来面试官接着说道 ;  如果div的宽高不知道 怎么做
 
如果有css3知识的同学 可能就会一笑而过了 这个问题同样很简单
 
在不知道宽高的情况下 让他 相对于自身  向左向上 偏移50%的 宽度 和高度就可以
 
把上面的 margin-left和margin-top  换成css3中的2d转换中有一个偏移的函数
 
transform:translate(-50%,-50%)   由于是向左 向上 所以是负数   不知道2d转换的童鞋可以去往w3c官网学习一下
 
3，完成了 以上i挨个问题之后  你可以先高兴一会 因为接下来 面试官的话 可能让你高兴不起来了
 
 如果在不知道宽高的情况下 让div居于屏幕正中间 你完成了 那么 如果div里面 有一段文字 也让这段文字相对于div居于它的正中间 怎么做
 
<div><p>hello world</p></div>
 
可能听完之后 就很难受了    但别急我们慢慢剖析
 
单单让文字水平居中  这个问多童鞋都会  是 text-align:center;
 
但是垂直居中呢   以往的话 童鞋们可能会用到 使用行高 也解决  line-hieght  但此时没有高度 你怎么使用
 
大家都知道 在表格中间每一列 有一个vertical-align:middle;就可以让我们的文字垂直居中于列中间了
 
这里要用到的就是这个东西   只是可能在工作中用的很少 很多人就忽略他了 
 
在div上加一个 display:table;  使其变成一个表格形式
 
同时设置里面的文字 水平居中  text-align:center;
 
还没有完  接下来 设置 “表格里面的元素”
 
p{

   display:table-cell;

    vertical-align:middle;

}
 
display:table;display:table-cell;  其实还有很多应用的 这里就不再一一赘述了 。有兴趣的童鞋去学习下
 
这样就完成了 不知道宽高 的div 居于屏幕正中间 里面有段文字也让他相对于div居于正中间

当看到要让footer居于底部的时候，是不是就有人说，直接用绝对定位就可以了，那你今天看到此文就对了，因为就是来帮你解决这个观点的。因为浏览器窗口的大小会被人为的放大缩小，而绝对定位于底部的参照物是窗口，所以就会跟随窗口浮上，解决办法如下： 
 1、min-height:600px;（自己设置最小的高度，当页面最小的时候，底部的footer就在600px这位置了） 
 2、position:relative;(没有这个的话，即使页面大于设置的最小高度，还是会以最小高度显示) 
 3、height:100%;==》(这个是以相对的那个的高度的100%) 
 (或者使用height:auto !important)==》（这个是里面的内容的高度撑开外面的高度，最好在页面的内容较多，能够到达浏览器页面的高度时使用）
 
首先!important的优先级是最高的

http://blog.csdn.net/zengzm163/article/details/50539854
 
 
居于H5的多文件、大文件、多线程上传解决方案 
 
 
 

  2016-01-18 23:40 
   1479人阅读 
  评论(1) 
  收藏 
  举报 
 
 
 
 
 

   
  分类： 
 
 
 

  总结与分享 
 
 
 
 
 
版权声明：本文为博主原创文章，未经博主允许不得转载。
 
 
 
 
目录(?)[+]
 
 
 
 
文件上传在web应用中是比较常见的功能，前段时间做了一个多文件、大文件、多线程文件上传的功能，使用效果还不错，总结分享下。
 
 
一、 功能性需求与非功能性需求
 
 
要求操作便利，一次选择多个文件进行上传；
支持大文件上传（1G），同时需要保证上传期间用户电脑不出现卡死等体验；
交互友好，能够及时反馈上传的进度；
服务端的安全性，不因上传文件功能导致JVM内存溢出影响其他功能使用；
最大限度利用网络上行带宽，提高上传速度；
 
 
二、 设计分析
 
 
对于大文件的处理，无论是用户端还是服务端，如果一次性进行读取发送、接收都是不可取，很容易导致内存问题。所以对于大文件上传，采用切块分段上传
从上传的效率来看，利用多线程并发上传能够达到最大效率。
对于大文件切块、多线程上传，需要考虑服务端合并文件的时间点；
 
 
三、解决方案：
 
 
在HTML5之前的标准是无法支持上面的功能，因此我们需要把功能实现居于H5提供的新特性上面： 
 1. H5新标准对file标签进行了增强，支持同时选择多个文件
 
 
<input type="file" multiple=true onchange="doSomething(this.files)"/>
  
1
  
1
 
 
注意multiple属性，设置为true； 
 onchange：一般是选择文件确定后的响应事件 
 this.files：文件对象集合 
 2. File对象 
 H5提供的类似Java的RandomAccessFile的文件操作对象，其中silce方法允许程序指定文件的起止字节进行读取。利用这个对象，实现对大文件的切分； 
 3. XMLHttpRequest 
 这个对象大家应该很熟悉了，属于web2.0的标准，我们最常用的ajax请求底层就是居于此对象。本质上XMLHttpRequest是一个线程对象，因此我们通过创建一定数量的XMLHttpRequest对象，实现多线程并行操作； 
 4. FormData对象 
 H5新增对象，可以理解为一个key-value的map，通过把文件的二进制流和业务参数封装到此对象，再交由XMLHttpRequest对象发送到服务端，服务端可以通过普通的request.getParamter方法获取这些参数； 
 5. progress标签 
 H5新增的标签，在页面显示一个进度条： 
 
 value：当前进度条的值 
 max：最大值 
 利用这个标签，结合XMLHttpRequest的回调来反馈目前上传的进度
 
 
四、客户端代码示例
 
 
HTML代码：
 
 
<input type="file" multiple=true onchange="showFileList(this.files)"/> 
<input id="uploadBtn" type="button"  value="上传"  onclick="doUpload()"/>&nbsp;
  
1
2
  
1
2
 
 
javascript脚本：
 
 
var quence = new Array();//待上传的文件队列，包含切块的文件
/**
* 用户选择文件之后的响应函数，将文件信息展示在页面，同时对大文件的切块大小、块的起止进行计算、入列等
*/
function showFileList(files) {
  if(!files) {
   return;
  }

  var chunkSize = 5 * 1024 * 1024;  //切块的阀值：5M
  $(files).each(function(idx,e){
        //展示文件列表，略......

   if(e.size > chunkSize) {//文件大于阀值，进行切块
    //切块发送
    var chunks = Math.max(Math.floor(fileSize / chunkSize), 1)+1;//分割块数
    for(var i=0 ; i<chunks; i++) {
     var startIdx = i*chunkSize;//块的起始位置
     var endIdx = startIdx+chunkSize;//块的结束位置
     if(endIdx > fileSize) {
      endIdx = fileSize;
     }
     var lastChunk = false;
     if(i == (chunks-1)) {
      lastChunk = true;
     }
    //封装成一个task，入列
     var task = {
       file:e,
       uuid:uuid,//避免文件的重名导致服务端无法定位文件，需要给每个文件生产一个UUID
       chunked:true,
       startIdx:startIdx,
       endIdx:endIdx,
       currChunk:i,
       totalChunk:chunks
     }
     quence.push(task);

    }
   } else {//文件小于阀值

    var task = {
      file:e,
      uuid:uuid,
      chunked:false
    }
    quence.push(task);

   }
  });
 }

/**
*  上传器，绑定一个XMLHttpRequest对象，处理分配给其的上传任务
**/
function Uploader(name) {
  this.url="";    //服务端处理url
  this.req = new XMLHttpRequest();
  this.tasks; //任务队列
  this.taskIdx = 0; //当前处理的tasks的下标
  this.name=name;
  this.status=0;  //状态，0：初始；1：所有任务成功；2：异常

  //上传 动作
  this.upload = function(uploader) {
   this.req.responseType = "json";

   //注册load事件（即一次异步请求收到服务端的响应）
   this.req.addEventListener("load", function(){
    //更新对应的进度条
     progressUpdate(this.response.uuid, this.response.fileSize);
     //从任务队列中取一个再次发送
     var task = uploader.tasks[uploader.taskIdx];
     if(task) {
      console.log(uploader.name + "：当前执行的任务编号：" +uploader.taskIdx);
      this.open("POST", uploader.url);
      this.send(uploader.buildFormData(task));
      uploader.taskIdx++;
     } else {
      console.log("处理完毕");
      uploader.status=1;
     }
   });

   //处理第一个
   var task = this.tasks[this.taskIdx];
   if(task) {
    console.log(uploader.name + "：当前执行的任务编号：" +this.taskIdx);
    this.req.open("POST", this.url);
    this.req.send(this.buildFormData(task));
    this.taskIdx++;
   } else {
    uploader.status=1;
   }
  }

  //提交任务
  this.submit = function(tasks) {
   this.tasks = tasks;
  }

  //构造表单数据
  this.buildFormData = function(task) {
   var file = task.file;
   var formData = new FormData();
   formData.append("fileName", file.name);
   formData.append("fileSize", file.size);
   formData.append("uuid", task.uuid);   
   var chunked = task.chunked;
   if(chunked) {//分块
    formData.append("chunked",  task.chunked);
    formData.append("data", file.slice(task.startIdx, task.endIdx));//截取文件块
    formData.append("currChunk", task.currChunk);
    formData.append("totalChunk", task.totalChunk);
   } else {
    formData.append("data", file);
   }
   return formData;
  }

 }

/**
*用户点击“上传”按钮
*/
function doUpload() {

  //创建4个Uploader上传器（4条线程）
  var uploader0 = new Uploader("uploader0");
  var task0 = new Array();

  var uploader1 = new Uploader("uploader1");
  var task1 = new Array();

  var uploader2 = new Uploader("uploader2");
  var task2 = new Array();

  var uploader3 = new Uploader("uploader3");
  var task3 = new Array();

  //将文件列表取模hash，分配给4个上传器
  for(var i=0 ; i<quence.length; i++) {
   if(i%4==0) {
    task0.push(quence[i]);
   } else if(i%4==1) {
    task1.push(quence[i]);
   } else if(i%4==2) {
    task2.push(quence[i]);
   } else if(i%4==3) {
    task3.push(quence[i]);
   }
  }
  /提交任务，启动线程上传
  uploader0.submit(task0);
  uploader0.upload(uploader0);    
  uploader1.submit(task1);
  uploader1.upload(uploader1);    
  uploader2.submit(task2);
  uploader2.upload(uploader2);    
  uploader3.submit(task3);
  uploader3.upload(uploader3);    


  //注册一个定时任务，每2秒监控文件是否都上传完毕
  uploadCompleteMonitor = setInterval("uploadComplete()",2000);
 }五、服务端处理：
 
 
服务端处理逻辑相对比较传统，利用输入输出流、NIO等把文件写到磁盘即可。 
 这里需要特别考虑的是关于被切块文件的合并。前端在上传的时候，文件块是无序到达服务端，因此我们在每次接收到一个文件块的时候需要判断被切块的文件是否都传输完毕并进行合并,思路如下： 
 回到前端，我们在构造被切块的文件formData的数据结构：
 
 
formData.append("fileName", file.name);
formData.append("fileSize", file.size);
formData.append("uuid", task.uuid);   
formData.append("chunked",  task.chunked);
formData.append("data", file.slice(task.startIdx, task.endIdx));//截取文件块
formData.append("currChunk", task.currChunk);
formData.append("totalChunk", task.totalChunk);
 
 
fileName：文件的原始名字 
 fileSize：文件的大小，KB 
 uuid：文件的uuid 
 chunked：true，标识是分段上传的文件块 
 data：文件二进制流 
 currChunk：当前上传的块编号 
 totalChunk：总块数
 
 
服务端以文件的UUID为key，维护一个chunk计数器，每接收到一块就找到对应的uuid执行计数器+1，同时考虑到并发情况，需采用同步关键字，避免出现逻辑错误。当计数器等于totalChunk的时候，进行文件合并
 
 
六、运行效果