form表单提交file

form表单提交文件，这毫无疑问不是个好办法。但是，存在既有意义。既然H5都还让着东西存在着，呢么必然有其意义。

form表单中的input type=file这个空间，不得不说奇丑无比！问题是还不能修改它的样式，这就更让人蛋疼了。

好了，不闲扯，咱还是一条一条的列出来。

首先，就像开头说的，奇丑无比。那么自然是不可能就这么放页面里的，老板会打死你，美工会打死你，你自己都会打死你！那么怎么办呢？

display：none！唉，好办法，我给它干掉，再搞个好看的button耦合到file控件上不就行了吗？就只要

　　$("#btn").on('click', function(){

　　　　$("#file").click();

　　});

不久完事大吉了吗？

　　chrome说：好！ff说：OK！IE说：我去你奶奶的，你谁啊？我让你点了吗？你想干什么？！！呵呵、、、

这就TM的尴尬了。

那么怎么办呢？别管你再怎么纠结或者僧器，你还是得老老实实opacity：0； 不光这样，你还得filter:alpha(opacity=0);　　(笑哭脸)ie就是这么任性。(ie9兼容opacity)

然后把你可爱的按钮放到file控件下层，记得是下层，让用户实际点击的是file控件。

————————————————————————————————华丽的。。。分割线+++++++++++++++++++++++++++++++++++++++++++++++++++

你以为这样就完了》？？

难道你上网的时候上传头像没有预览？还有你选择文件的时候选错了格式怎么办？你的相册一次想上传N张图片怎么办？哈

我不会这么轻易的就狗带！

OK，做个图片预览吧。

其实图片预览的话要涉及到几方面。

这里先把file控件的一些特性罗列一下，下面都要用到。

首先，file的value不是你想想中的value，不要妄想了。而且file控件的value是不可编辑的，所以我们获取了也没卵用。这在我们清除文件的时候很心累。我们如果想要获取文件的地址，需要一些小小的手段。

其次，file控件支持accept属性，值得话类似image/*形式，*可以替换成相应的格式，多种格式逗号分隔。其实这种方式是不被推荐的，官方没说为什么不推荐。本人亲试觉得还真是别用了，卡出翔。加个类型　　　　　　（image/*）卡出一　　个级别，如果再有具体的格式（image/jpg）又卡出一个级别，后果就是被打死。。所以呢，还是服务器验证好了，或者干脆不验证，让用户去死（我什么都没说、、、）

然后，file控件还支持multiple属性，multiple=“multiple”，而如何获取每个文件，将在ajax中祥述。

最后，图片预览。

如何预览呢？两种方式，一是服务器预览，二是本地预览。本地预览才是真理。

那么就需要获取文件的url，写入到img的src里。之前说了，value并不是我们想要的，那么就需要用到js了。

function getUrl (file){
    var url = null;
    if(window.createObjectURL){            //basic
        url = window.createObjectURL(file);
    }
    else if(window.URL){                   //firefox
        url = window.URL.createObjectURL(file);
    }else if(window.webkitURL){            //webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
};
这段拿去尽情copy好了，死东西。jq并不提供相应方法。

然后url都有了，直接塞给img就完了。

至于头像的修改啦，什么裁剪啦什么的，那就不再本文范围内了。