【文件上传 前端】文件上传 前端 Part2 —— HTML5 文件指针方式
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html" charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>upload file2 - h5传文件指针</title>
</head>
<body>
<input type="file" accept="image/*" id="J_upload_btn" />
<div id="J_preview_area">
</div>
<script src="jquery-1.9.1.min.js"></script>
<script>
$('body').on('change','#J_upload_btn',function(){
var source = $(this).get(0),
file = source.files[0];
var ireg = /image\/.*/i,
file_type = file.type,
file_name = file.name;
if(!file_type.match(ireg)) {
alert('不是图片，请重新选择');
}else{
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
var file_data;
// 此处不做任何压缩直接读取文件流显示为图片（可扩展为压缩图片后显示）
file_data = e.target.result;
$('#J_preview_area').html('<img src="'+file_data+'" />');
var url = 'upload_file1.php';
var xmlhttp;
if (window.XMLHttpRequest) {
//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest;
//针对某些特定版本的mozillar浏览器的bug进行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
};
} else if (window.ActiveXObject){
//IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
};
if(xmlhttp.upload){
//2.回调函数
xmlhttp.onreadystatechange = function(e){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
var json = eval('(' + xmlhttp.responseText + ')');
console.log(json);
}else{
console.log(xmlhttp.responseText);
}
}
};
//3.设置连接信息
xmlhttp.open("POST",url,true);
//4.发送数据，开始和服务器进行交互
var formdata = new FormData();
formdata.append("file", file);
xmlhttp.send(formdata);
}
};
fr.readAsDataURL(file);
}
}
});
</script>
</body>
</html>
使用HTML5读取图片显示缩略图，并使用文件指针方式上传有以下几个注意点：
1、此方法需支持HTML5的FileReader（即ie10+）
2、选择图片时，首先需要在input type="file” 加上accept的类型，其次也需要js进行正则校验文件的type（由于accept只是在文件选择器打开时筛选出符合条件的文件供用户选择，用户任然可以切换到所有文件，所以需要加上js的正则过滤，以确保文件类型正确）
3、由于FileReader读取文件流是一个异步的过程，图片预览必须写在FileReader的onloadend函数中，等文件流读取完毕后才能获取到base64之后的图片流，另外由于是用文件指针的方式，所以上传的部分只要选择了图片即可上传，不必一定放在这FileReader的onloadend函数中（例子中只是为了在预览完毕后进行上传，不是必须的行为）
4、这个方法是用http模拟ajax的方法异步上传文件，所以页面不会跳转，但是值得注意的是传统jquery中的ajax是无法上传文件的
5、提交到的upload_file1.php具体如何接受文件，也会在之后文件上传-后端部分进行介绍
