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