Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )
1.FileList objects and File objects
Is type = "file" of <input /> element adds the following properties.
- accept: This attribute controls allow file types to upload. This attribute is one or more MIME type string. It should be separated by commas between the plurality of MIME type string.
- multiple: This property is allowed to select multiple files.
As long as the type = "file" of <input /> element to increase multiple attributes, you can make the file upload field allows to select multiple files.
<Input /> elements of all of the files generated JavaScript file upload art can t ype = "file" files accessed through property, which returns a target FileList, FileList objects corresponding to an array, developers can use a method similar to the array of File access each object within the array.
File object is a JavaScript object, JavaScript can obtain information about all files the user to browse through the object. File object contains the following properties :
- name: Returns the filename to the file File corresponding object, part of the file path.
- type: Returns the MIME type String File object corresponding to the file.
- size: Returns the size of the corresponding file File object.
<div>
浏览图片：<input id="images" type="file" multiple accept="image/*" />
<input type="button" value="显示文件" onclick="showDetails()" />
</div>
<script type="text/javascript">
var showDetails = function () {
var imageEle = document.getElementById("images");
//获取文件上传域内输入的多个文件
var fileList = imageEle.files;
//遍历每个文件
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
div = document.createElement("div");
div.innerHTML = "第" + (i + 1) + "个文件的文件名是：" + file.name
+ ",该文件类型是：" + file.type
+ "，该文件大小为：" + file.size;
//把div元素添加到页面中
document.body.appendChild(div);
}
}
</script>Click to display the file will be able to see the following results:
2. Use the FileReader reads the contents of the file
FileReader is also a JavaScript object, developers can read the contents of file upload fields selected by the client object.
It provides a method FileReader
- readAsText (file, encoding): In a text file to read the file, wherein when the encoding file parameter specifies the character set, the default value for this parameter is UTF-8.
- readAsBinaryString (file): in binary mode to read the file. Can read the contents of the documents in this way binary data, so that you can upload the data to the server via Ajax.
- readAsDataURL (file): DataURL way to read the file. In this manner the string can be used to read a binary file, but this embodiment mode will be base64 encoded into the contents of the file format DataURL
- abort (): stop reading.
It should be noted that all of readXxx FileReader () methods are asynchronous methods, which will not be returned directly read the contents of the file, the program must be event listeners way to get the results read. FileReader provide some of the following event listener reading process.
- onloadstart: FileReader function of the trigger event specified when reading data starts.
- onprogress: Trigger function specified when the event FileReader is reading data.
- onload: FileReader function of the properties of the event after a successful read data triggered.
- onloadend: FileReader after the completion of reading the data trigger function of the specified event, regardless of success or reading is reading failure it will trigger the event specified function.
- onerror: the triggering event specified function when reading failure FileReader.
<div>
浏览文件：<input id="file1" type="file" /><br />
</div>
<div id="result"></div>
<input type="button" value="读取文本文件" onclick="readText()"/><br />
<input type="button" value="读取二进制文件" onclick="readBinary()"/><br />
<input type="button" value="以DataURL方式读取" onclick="readURL()"/><br />
<script type="text/javascript">
var reader = null;
//判断浏览器是否支持FileReader对象
if (FileReader) {
reader = new FileReader();
}
else {
alert("浏览器暂不支持FileReader");
}
var readText = function ()
{
//通过正则表达式验证该文件是否为文本文件
if (/text\/\w+/.test(document.getElementById("file1").files[0].type))
{
reader.readAsText(document.getElementById("file1").files[0], "gbk");
reader.onload = function () {
document.getElementById("result").innerHTML = reader.result;
};
}
else {
alert("你选择的文件不是文本文件");
}
}
var readBinary = function () {
//以二进制流的方式读取用户选择的第一个文件
reader.readAsBinaryString(document.getElementById("file1").files[0]);
//当reader读取数据完成时将会触发该函数
reader.onload = function () {
document.getElementById("result").innerHTML = reader.result;
};
}
var readURL = function () {
reader.readAsDataURL(document.getElementById("file1").files[0]);
reader.onload = function () {
document.getElementById("result").innerHTML = reader.result;
};
}
</script>Click Choose File to select a text file, and click on "Read Text File", will be able to read the text:
The other two can read binary file, just select a file.
Click to read binary file, as shown:
Click to DataURL reads as:
