如何上传图片

Jq中的trigger

myElement.trigger("event"); 
这个命令相当于执行的时候触发了myElement元素的事件event， 
他和直接使用click，mousemove之类的命令的区别在于1.可以带参数传进去。2.这个命令是绑定在一个元素上，触发另一个元素的event事件，和click，mousemove之类的命令还是有本质的区别的。

如何自定义指令directive

首先我们先来列出的directive中的几个属性： 
restrict：

• E： 表示该directive仅能以element方式使用，即<my-dialog></my-dialog>
• A： 表示该directive仅能以attribute方式使用，即<div my-dialog></div>
• C：表示该directive仅能以class方式使用，即<div class="my-dialog"></div>
• EA: 表示该directive既能以element方式使用 ,也能以attribute方式使用。

transclude：当directive可能接受页面上的其他html内容时才会用到。有些高阶暂时不管它。

scope：当你写上该属性时，就表示这个directive不会从它的controller里继承scope对象，而是会重新创建一个，类似于angular中的$scope对象，而是会重新创建一个，类似于angular中的$ scope。

templateUrl：你的directive里的html内容（注意使用引号和折行符）。

link：

• 可以简单理解为，当directive被angular 编译后，执行该方法。
• 类似于在directive里需要调用dom元素中把方法写在link里面（不知道这样理解是否正确）。
• link中有几个参数，scope, element, attrs。分别表示：1.scope表示directive里的scope；2.element表示directive创建的元素；3.attrs表示这个创建的元素的其他属性。（如：type，title这些的属性）

FormData()

FormData其实是一个HTML5的对象，用来当需要传输文档或者图片时，新建一个空的对象，然后把要上传的文件插入空对象中 
同时，注意，formdata是一个不透明的对象，现在暂时只有一个append可以操作，不能通过序列化手段得到其里面的内容，所以console.log是无法输出可见的数值的。

var oMyForm = new FormData();  //新建一个空的FormDate对象
oMyForm.append("username", "Groucho");//插入两个字符串
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"
// fileInputElement中已经包含了用户所选择的文件  <input type="file" />用来选择文件
oMyForm.append("userfile", fileInputElement.files[0]);   
var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});   //blob是oFileBody 的一个实例
oMyForm.append("webmasterfile", oBlob);  //把oblob插入进去
//现在formdate中
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

如何自定义上传指令

好，说了这么多，到底应该如何用指令写一个照片传输

angular.module('skillApp')
.directive('simpleUpload', function(uploadFileService) {
    return {
        restrict: 'AE',   //元素和属性
        scope: true,     //单独定义scope，相当于于angular中的$scope，只是在这个命令里有用
        template:    //html代码部分
        '<div class="uploader-box">'+
        '<div class="uploader-box-img" ng-if="img" ng-style="{\'background-image\':\'url(\' + img + \')\'}"></div>'+
        '</div>'+
        '<input class="hidden" type="file" id="fileInput" onchange="angular.element(this).scope().uploadFile(this.files);">',
        link: function(scope, element, attrs) {    //其实是用来操作自定义指令中生成的元素
            scope.triggerSelect = function() {
                element.children('input[type=file]').trigger('click');    //这句话点击后触发input的点击事件
            };
            scope.uploadFile = function(files) {
                var fd = new FormData();    //新建一个空的FormData对象
                fd.append("file", files[0]);    //把文件插入这个空的对象中
                $http.post('/a/u/img/thumb', formData, {   //把文件上传到后台
                    withCredentials: true,
                    headers: {'Content-Type': undefined },
                    transformRequest: angular.identity
                })        
           }
        } 
    }
}

1.把展示的html代码写在template里面，注意要要用引号的地方用引号，该用转义字符的时候要用转义字符 
2.在link里对把图片插入formdata里，然后上传。

PS：（虽然写出来了，但是其实大多也是复制粘贴，把我自己在看的过程中的不会的地方按照自己的理解说了一下。有问题还请多指教= =）

来源： http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html 
来源： https://segmentfault.com/q/1010000002400734