1.表單上傳文件的步驟：
- 1）設置enctype
默認為：enctype="application/x-www-form-urlencoded"（一般不設置）
若要表單中有需要上傳文件的表單項時，則必須設置enctype：enctype="multipart/form-data"- 2）設置method：提交方式
默認：get
需要上傳文件時，必須設置為post因為get方式攜帶的信息量太小，而且傳輸的數據都會顯示在地址欄，對於圖片等文件無法處理
2.上傳文件
一次只能選擇一個文件上傳
偽代碼
<form action="UploadOneServlet" method="post" name="f_upload" enctype="multipart/form-data">
<input type="text" name="username" /><br>
<input type="file" name="filename" /><br>
<input type="submit" value="上傳" />
</form>
運行結果
此時我們可以看到一次只能選擇一個文件，進行上傳。
一次能同時選中多個文件同時上傳
很多時候我們需要同時選擇多個文件實現多個文件的上傳，那么只選擇一個文件的情況就不適用，如何設置呢？
在input中設置屬性multiple即可 - - multiple=”multiple”
偽代碼
<form action="UploadOneServlet" method="post" name="f_upload" enctype="multipart/form-data">
<input type="text" name="username" /><br>
<input type="file" name="filename" multiple="multiple" /><br>
<input type="submit" value="上傳" />
</form>
運行結果
此時我們可以看到一次可以選擇多個文件，進行上傳。
css input[type=file] 樣式美化(input上傳文件樣式 )
效果：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> /*樣式1*/ .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-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none } /*樣式2*/ .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; } </style> </head> <body style="padding: 10px"> <a href="javascript:;" class="a-upload"> <input type="file" name="" id="">點擊這里上傳文件 </a> <a href="javascript:;" class="file">選擇文件 <input type="file" name="" id=""> </a> </body> </html>
帶有圖片預覽功能的上傳表單
http://blog.csdn.net/haibo0668/article/details/77262452
引用：http://blog.163.com/yibei_kukafei/blog/static/300210212015519114718389/