1、檔案上傳基本寫法：
<input
type
="file"
name
=""id
=""value
=""/>
2、檔案框美化
檔案域
<div
class
="div1"
>
<
div
class
="div2"
>上傳
div>
<
label
class
="inputstyle"
for="imgupload"
>上傳
label
>
div>
<
iframe
id="myiframe"
name
="myiframe"
style
="display:none;"
onload
="iframeload(this)"
>
iframe
>
<
form
id="uploadpicform"
style
="position: relative;margin: 0"
action
="safetyperformcontroller/imgupload"
method
="post"
enctype
="multipart/form-data"
target
="myiframe"
>
<
input
id="fileid"
name
="fileid"
type
="hidden"
>
<
input
id="imgupload"
class
="imgupload"
type
="file"
name
="file"
multiple
="true"
size
="28"
accept
="image/jpeg,image/png"
/>
form
>
樣式
.div1.div2
.inputstyle
3、使用注意
1>使用input[type=file]時要注意一定要包裹在form表單內部，form表單要宣告編碼型別enctype="multipart/form-data"。
2>input下的value值無法修改。
4.上傳前預覽和ajax傳輸
尤其在做上傳時，我們會用到預覽。在html5還沒出現的舊時代，只有低版本的ie瀏覽器貌似有方法，使用私有的濾鏡，超越安全的限制（其實是利用了不好的東西），實現直接預覽；但是呢，那個時候，chrome,
firefox沒有這一出，於是，想要使用原生file
input實現的上傳前預覽，相容性坎很難跨過去。隨著h5出現。可以讓我們直接讀取的資料，然後在頁面上呈現，實現了上傳前預覽。對低版本的ie則可以使用濾鏡去相容。
傳統的form表單提交後，頁面重新整理後跳轉。使用ajax讓使用者有了跟好的體驗。html5裡面支援二進位制formdata資料提交，因此，可以從容ajax提交上傳的檔案資料；那老舊的ie瀏覽器怎麼辦？
一般方法如下：
form元素新增target屬性，其值指向頁面內隱藏的乙個元素的id, 如下：
<form
action
=""method
="post"
enctype
="multipart/form-data"
target
="uploadiframe"
><
id="uploadiframe"
>
iframe
>
處理元素的onload事件，獲得返回內容。
var doc = iframe.contentdocument ?iframe.contentdocument : frames[iframe.id].document;var response = doc.body && doc.body.innerhtml;
檔案上傳及預覽
現在上傳頭像是很常見的了在很多地方可以用到 在這裡我們了解一下怎麼上傳影象 一 檔案上傳功能 1 第一是要有這個上傳頁面了 首先是要寫表單元素了 其中就有處理頁面 關於上傳的處理了，其中有些規則可以寫 還有傳輸方式，再就是乙個重要的屬性，因為是檔案上傳，所以要有這個屬性 enctype multip...
ajax 檔案上傳
用ajax實現檔案的非同步上傳功能是很常用的。html定義檔案上傳標籤 type file id myfile class default multiple multiple multiple屬性是聲音這個檔案上傳標籤可以一次性上傳多個檔案js上傳檔案驗證 這裡我假設上傳的是excel檔案 注意只能...
Ajax上傳檔案
使用ajax上傳檔案的話，就需要用到fromdate，fromdate，可以把form中所有表單元素的name與value組成乙個querystring，提交到後台。在使用ajax提交時，使用formdata物件可以減少拼接querystring的工作量。processdata false cont...