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

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

form表单提交file的更多相关文章

  1. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  2. Java后台使用httpclient入门HttpPost请求(form表单提交,File文件上传和传输Json数据)

    一.HttpClient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 ...

  3. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  4. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  5. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  6. 前端基础:form表单提交

    今天介绍下form表单提交经常用到的表单元素. 1:datalist元素,一般与input组建配合使用,以定义可能输入的值,例如: <!DOCTYPE html> <html lan ...

  7. js_ajax模拟form表单提交_多文件上传_支持单个删除

    需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...

  8. 24.form表单提交的六种方式

    form表单提交方式 1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标 ...

  9. c#WebApi使用form表单提交excel,实现批量写入数据库

    思路:用户点击下载模板按钮,获取到excel模板,然后向里面填写数据保存.from表单提交的时候选择保存好的excel,实现数据的批量导入过程 先把模板放在服务器的项目目录下面:如 模板我一般放在:F ...

随机推荐

  1. UVALive 4287 Proving Equivalence (强连通分量)

    把证明的关系看出一张图,最终就是要所有的点都在至少一个环中.环的判断和度数有关. 用tarjan找强连通分量,在一个强连通分量点已经等价缩点以后形成一个DAG,计算入度为0的点数a, 出度为0的b,取 ...

  2. IOS修改系统音量

    #import <IOKit/IOKitLib.h> #import <IOKit/hidsystem/IOHIDLib.h> #import <IOKit/hidsys ...

  3. android stuido ndk 开发

    开发环境: Android studio 1.0.2 ndk android-ndk-r10d-windows-x86_64 ------------------------------------ ...

  4. MIPS汇编程序设计——四则运算计算器

    实验目的 运用简单的MIPS实现一个能够整数加减乘除的计算器,同时使自己更加熟悉这些指令吧 MIPS代码 #sample example 'a small calculater’ # data sec ...

  5. Linux中fork函数的例子

  6. 关于CSS3三角的实现

    1,向上的三角 ;;           ;;           </html> 3,向左的三角 ;;           </html> 4,向右的三角 ;;        ...

  7. 爬虫5_python2_使用 Beautiful Soup 解析数据

    使用 Beautiful Soup 解析数据(感谢东哥) 有的小伙伴们对写正则表达式的写法用得不熟练,没关系,我们还有一个更强大的工具,叫Beautiful Soup,有了它我们可以很方便地提取出HT ...

  8. Java常见对象Object类中的个别方法

    Java常见对象Object类 public int hashCode() : 返回该对象的哈希码值. 注意:哈希值是根据哈希算法计算出来的一个值,这个值和地址值有关,但是不是实际地址值.你可以理解成 ...

  9. jpeg和jpg的区别是什么

    JPG是JPEG的简写,jpg是后缀名,jpeg既可作为后缀名,又能代表文件格式:JPG——JPEG文件格式. 我们在系统自带的画图程序里保存文件,在保存类型:JPEG(*.JPG,*.JPEG,*. ...

  10. 【Java_多线程并发编程】JUC原子类——AtomicLong原子类

    1. AtomicLong是基本原子类中的一种 AtomicLong是对长整形进行原子操作. 1.1 AtomicLong类的函数列表 // 构造函数 AtomicLong() // 创建值为init ...