【原创】js中input type=file的一些问题

1.介绍

在开发中，文件上传必不可少，input[type=file] 是常用的上传标签，但是它长得又丑、浏览的字样不能换，但是他长得到底有多丑呢。我们来看看在不同浏览器里的样子吧。

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

谷歌：

IE:

FF:

看到了。在不同浏览器里他是不同的样式。作为有强迫症的同学有没有觉得看不下去了。既然长得这么丑，那么我们就有必要要给它化妆了。

2.如何美化input[type=file] 框

思路是这样的：既然长的丑就不要见人了，藏起来

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

来看看第一个：

<a class="a-upload">
   <input type="file" name="" id="">点击这里上传文件
</a>

                    .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 class="file">选择文件
	<input type="file" name="" id="">
</a>

　　

.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;
}

既然变漂亮了。那我们也该让它接活干了

 

 

3.input[type=file]是干嘛的？创建文件上载控件，该控件带有一个文本框和一个浏览按钮。

使用input[type=file]时要注意一定要包裹在form表单内部，form表单要声明编码类型enctype="multipart/form-data"。

4.属性

input file类型控件有一个属性，名为accept, 是用来来指定浏览器接受的文件类型，也就是的那个我们打开系统的选择文件弹框的时候，默认界面中呈现的文件类型。例如：accept="image/jpeg"，则界面中只有jpg图片，如下截图，同时，窗体右下方是“自定义文件”按钮：

 

<input type="file" name="" id="" accept="image/jpeg">

　　

 accept 属性只能与 <input type="file"> 配合使用。

多个属性一起使用，使用逗号分隔。<input accept="audio/*|video/*|image/*|MIME_type">

常见的属性值

audio/* 接受所有的声音文件。
video/* 接受所有的视频文件。
image/* 接受所有的图像文件。
MIME_type 一个有效的 MIME 类型，不带参数。请参阅 IANA MIME 类型，获得标准 MIME 类型的完整列表。

5.上传前预览和Ajax传输
尤其在做图片上传时，我们会用到预览。在HTML5还没出现的旧时代，只有低版本的IE浏览器貌似有方法，使用私有的滤镜，超越安全的限制（其实是利用了不好的东西），实现图片直接预览；但是呢，那个时候，Chrome, FireFox没有这一出，于是，想要使用原生file input实现图片的上传前预览，兼容性坎很难跨过去。随着H5出现。可以让我们直接读取图片的数据，然后在页面上呈现，实现了上传前预览。对低版本的IE则可以使用滤镜去兼容。

传统的form表单提交后，页面刷新后跳转。使用Ajax让用户有了跟好的体验。HTML5里面支持二进制formData数据提交，因此，可以从容Ajax提交上传的文件数据；那老旧的IE浏览器怎么办？

一般方法如下：（此处复制）

1. form元素新增target属性，其值指向页面内隐藏的一个<iframe>元素的id, 如下示意：

   <form action="" method="post" enctype="multipart/form-data" target="uploadIframe"><
   <iframe id="uploadIframe"></iframe>  

2. 处理<iframe>元素的onload事件，获得返回内容（如下代码示意），具体细节非本文重点，不表。

   var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document;
   var response = doc.body && doc.body.innerHTML;

OK, 当然，你也可以不用像上面这么麻烦，直接使用jquery.form.js. 原理呢，就是上面这样，但是，不需要这么麻烦。