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就完了。

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

原文地址:https://www.cnblogs.com/yunzhexiaye/p/6211319.html