在html中實現文件上傳的方式為form表單中使用input type="file"控件,但是這個控件往往顯示不是美觀,影響頁面效果,這時候,一般就通過一鍵上傳的操作,來實現點擊一個按鈕上傳文件.
原理:
設置一個具有file上傳文件框的form表單,並且設置style表單為不顯示的,同時呢,要對表單中的input控件進行onchange事件監聽,當input控件改變的時候,就觸發表單提交的操作.設置一個上傳文件的按鈕,當點擊按鈕時候,觸發表單中的input空間的click事件,來進行文件的瀏覽.這樣一來,當選擇好文件后,就自動提交了.
因為表單提交的話,就會自動刷新當前頁面,因此采用,在頁面中添加一個隱藏的<iframe>控件,並且將file提交的表單form中的target屬性指向iframe控件,這樣一來,就實現了當前頁面無刷新的一鍵上傳的操作.
代碼為:(注:jq文件需要自己引入)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件一鍵上傳</title> <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { //當點擊"一鍵上傳"按鈕的時候,觸發表單中的瀏覽文件的操作 $("#hehe").click(function() { $("#uploadfile").click(); }) //當選擇好上傳文件后,執行提交表單的操作 $("#uploadfile").change(function() { alert("上傳文件"); $("#form1").submit(); }) }) </script> </head> <body> <input type="button" id="hehe" value="上傳文件" /> <form style="display: none;" id="form1" action="#" method="post" enctype="multipart/form-data" target="myframe"> <input type="file" name="uploadfile" id="uploadfile" /> </form> <iframe style="display: none;" id="myframe"/> </body> </html>
當點擊上傳文件按鈕的時候,自動彈出選擇文件的頁面
在后台頁面進行操作,而不是在當前頁面刷新
實際開發中,往往采用的是jquery.ocupload的js插件進行一件上傳的操作;
官網:http://code.google.com/p/ocupload/
實際操作js代碼示例:
$("#button-import").upload({
action: '實際開發中的提交位置',
onSelect: function (self, element) {
this.autoSubmit = false; //關閉自動提交,方便后面進行文件類型判斷
var filename=this.filename();//設定文件名
var flag1= filename.endsWith(".xls");
var flag2= filename.endsWith(".xlsx");
if(flag1||flag2){//判斷是否是所需要的文件類型,這里使用的是excel文件
this.submit();
}else{
alert("提示請選擇正確的文件");
}
},
onComplete: function (data, self, element) {
alert("提示文件上傳成功");//當上傳成功后,提示
}
});
就是這么簡單,具體就不演示了