用JQuery獲取File input裏面的數據

今天學習了用Jquery獲取File input裏面的數據。

我寫了一個爪哇服務，用來在網頁或命令行中經過表單上傳文件。

在網頁中使用的表單方式爲multipart/form-data,在爪哇裏面經過MultipartHttpServletRequest獲取文件，很好用啊。

但是寫命令行的小朋友搗亂，使用的表單方式爲application/x-www-form-urlencoded，傳的是文件內容字符串，如今可好了，爪哇裏面獲取不到文件了。

洽談以後，決定將文件以字符串的方式傳輸，就是接下來的內容了。

首先有個表單，裏面有兩個input，一個用來選擇文件，而另外一個則用來存儲讀到的文件內容。

<form id="form" >
    <input type="file" name="fileTrans" />
    <input type="hidden" name="file" />
</form>

接下來檢查瀏覽器是否支持Fie API

if (!(window.File || window.FileReader || window.FileList || window.Blob)) {
    alert('你媽喊你換Chrome瀏覽器啦');
}

在選擇好文件以後，經過Jquery獲取到文件內容

var files = $('input[name="fileTrans"]').prop('files');//獲取到文件列表

if(files.length == 0){
    alert('請選擇文件');
    return;
}else{
    var reader = new FileReader();//新建一個FileReader
    reader.readAsText(files[0], "UTF-8");//讀取文件 
    reader.onload = function(evt){ //讀取完文件以後會回來這裏
        var fileString = evt.target.result;
        form.file.value = fileString; //設置隱藏input的內容
    }
}

如今提交表單，就能夠經過request.getParameter("file");獲取到文件內容嚕。