【原創】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. 原理呢，就是上面這樣，但是，不需要這么麻煩。