Jquery获取File input所选的文件数据（chrome）

原文 ：http://blog.segmentfault.com/di/1190000000482791

今天学习了用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>
1
2
3
4

接下来检查浏览器是否支持Fie API

if (!(window.File || window.FileReader || window.FileList || window.Blob)) {
    alert('你妈喊你换Chrome浏览器啦');
}
1
2
3

在选择好文件之后，通过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;
    alert（fileString ）
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

现在提交表单，就可以通过 request.getParameter(“file”); 获取到文件内容噜。