今天做了什么/收获：

js里的params

是指跳转页面后可以取上一个页面的所有值 params.（文本框的Name属性值）就可以获取他的Value了！一般用EL表达式获取 ${params.（文本框的Name属性值）}

HTML5的 input:file上传类型控制

2014年8月29日 116095次浏览

一、input:file属性

属性值有以下几个比较常用：

accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。

multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。

1、accept

只能选择png和gif图片

<input id="fileId1" type="file" accept="image/png,image/gif" name="file" />

2、multiple

多文件上传

<input id="fileId2" type="file" multiple="multiple" name="file" />

css input[type=file] 样式美化，input上传按钮美化

css input[type=file] 样式美化，input上传按钮美化

2014年8月29日 232549次浏览

，今天的内容是input[type=file] 样式美化，input上传按钮美化。

思路：

input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。

代码如下：

DOM结构：

<a href="javascript:;" class="a-upload">

    <input type="file" name="" id="">点击这里上传文件

</a>

<a href="javascript:;" class="file">选择文件

    <input type="file" name="" id="">

</a>

CSS样式1：

/*a  upload */

.a-upload {

    padding: 4px 10px;

    height: 20px;

    line-height: 20px;

    position: relative;

    cursor: pointer;

    color: #888;

    background: #fafafa;

    border: 1px solid #ddd;

    border-radius: 4px;

    overflow: hidden;

    display: inline-block;

    *display: inline;

    *zoom: 1

}

.a-upload  input {

    position: absolute;

    font-size: 100px;

    right: 0;

    top: 0;

    opacity: 0;

    filter: alpha(opacity=0);

    cursor: pointer

}

.a-upload:hover {

    color: #444;

    background: #eee;

    border-color: #ccc;

    text-decoration: none

}

样式2：

.file {

    position: relative;

    display: inline-block;

    background: #D0EEFF;

    border: 1px solid #99D3F5;

    border-radius: 4px;

    padding: 4px 12px;

    overflow: hidden;

    color: #1E88C7;

    text-decoration: none;

    text-indent: 0;

    line-height: 20px;

}

.file input {

    position: absolute;

    font-size: 100px;

    right: 0;

    top: 0;

    opacity: 0;

}

.file:hover {

    background: #AADFFD;

    border-color: #78C3F3;

    color: #004974;

    text-decoration: none;

}

修改后如下：

enter image description here

样式二：

enter image description here

备注：对于HTML5之input:file，还可以控制上传的类型的，但是这个是html5的，低版本浏览器不支持，详情请看：HTML5的 input:file上传类型控制 http://www.haorooms.com/post/input_file_leixing

美化后显示文件名

上面美化，把默认显示的文件名也给隐藏掉了，那么如何显示文件名称呢？没关系，我们可以用jquery来获取文件的文件名。

我们可以写个change事件

$(".a-upload").on("change","input[type='file']",function(){

    var filePath=$(this).val();

    if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){

        $(".fileerrorTip").html("").hide();

        var arr=filePath.split('\\');

        var fileName=arr[arr.length-1];

        $(".showFileName").html(fileName);

    }else{

        $(".showFileName").html("");

        $(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();

        return false 

    }

})

理了一下图片上传的概念：

  Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。

1. Data URL基本原理

图片在网页中的使用方法通常是下面这种利用img标记的形式：

　　这种方式中，img标记的src属性指定了一个远程服务器上的资源。当网页加载到浏览器中 时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着，如果一个 网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。而使用Data URL技术，图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体，它的形式如下：

从上面的base64字符串中你看不出任何跟图片相关的东西，但下面，我们将传统的img写法和现在的Data URL用法左右对比显示，你就能看出它们是完全一样的效果。但实际上它们是不一样的，它们一个是引用了外部资源，一个是使用了Data URL。

　　几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。IE8也支持，但有部分限制，IE9完全支持

贴上这部分自己的代码

.controller('upload', function($scope,$http){

    $scope.reader = new FileReader(); //FileReader接口提供了一个异步的APl

    //访问不同的文件 必须重新调用FileReader的函数构造 也就是重新new一个FileREader对象

    //因为每调用一次，FileReader对象都将返回一个新的FileReader实例，只有这样，才能实现访问不同文件的数据

    $scope.upload = function(files) {

        $scope.reader.readAsDataURL(files[0]); //获取API异步读取的文件数据，另存为数据URL，并将URL绑定到IMG的src

        $scope.reader.onload = function(e) {

            document.getElementById("showHere").src=e.target.result;

        };

        $scope.show1 = 'true';

        $scope.picData= document.getElementById('file').files[0];

        $scope.$apply();

        console.log($scope.picData.name);

    }

})

明天做的事情：继续完善任务

问题：发现好多问题都是我开始没认真看任务要求的锅。。。

FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去—— 是不是也可以理解为将读取的数据放入到浏览器的缓存里了呢？