作为H5的一部分,web存储得到了很好的支持,但不是存取数据的唯一方式,为了实现与存储相关的不同任务,也出现了其他几种不同的标准,其中一个就是File API,从技术角度讲他并不是h5的规范内容,但是现在的浏览器却是有着较好的支持,当然IE除外。
1.用input读取文本文件
<!DOCTYPE html>
<html>
<head>
<title>h5文件上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<style type="text/css">
.leftbox{
width:50%;
height:700px;
border:1px #000 solid;
}
#fileOutput{
width:90%;
height:80%;
border:1px #ccc solid;
}
</head>
<body>
<div class="leftbox">
<input id="fileInput" type="file" onchange="processFiles(this.files)" >
<!-- <input id="fileInput" type="file" onchange="processFiles(this.files)" multiple> -->
<div id="fileOutput">
</div>
</div>
</body>
<script type="text/javascript">
function processFiles(files){
var file = files[0]; //从input提供的文件集中取得第一个文件。若要选择儿多个文件使用multiple属性如上html代码,那么这里就要用个for循环了。。。。
var reader = new FileReader(); //创建FileReader对象,以便处理文件
reader.onload = function(e){//这个时间一旦发生,就表明数据存储完成
var output = document.getElementById('fileOutput');
output.textContent = e.target.result;//将内容复制到div中
};
reader.readAsText(file);//将取出的文本内容转换为长字符串,保存在onload事件的e.target.result中。
}
</script>
</html>
2.通过拖拽读取图片文件
<!DOCTYPE html>
<html>
<head>
<title>h5文件上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<style type="text/css">
.rightbox{
float:right;
background-color: #ccc;
width:50%;height:700px;
margin-top: -701px;border:1px #000 solid;
}
#dropbox{
margin:15px;
width:300px; height:300px;
border:3px dashed gray;
border-radius: 8px;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
}
#dropbox div{
margin:100px 70px;
color:orange; font-size: 25px;
font-family: Verdana,Arial,sans-serif;
}
</style>
</head>
<body>
<div class="rightbox">
<div id="dropbox">
<div>drop you image here......</div>
</div>
</div>
</body>
<script type="text/javascript">
var dropbox;
window.onload = function(){
dropbox = document.getElementById("dropbox");
dropbox.ondrapenter = ignoreDrag;
dropbox.ondrapover = ignoreDrag;
dropbox.ondrop = drop;
};
function ignoreDrag(e){
e.stopPropagation();
e.preventDefault();//确保不会有其它元素取得这个事件
}
function drop(e){
e.stopPropagation();
e.preventDefault();//取消事件传播及默认行为
var data = e.dataTransfer;//取得拖进来的文件
var files = data.files;
processFiles_one(files);//将其传给真真处理文件的函数。
}
function processFiles_one(files){
var file = files[0];
var reader = new FileReader(); //创建FileReader对象,以便处理文件
reader.onload = function(e){//这个时间一旦发生,就表明数据存储完成
dropbox.style.backgroundImage = "url("' + e.target.result + '")";
};
reader.readAsDataURL(file);//读取图片
}
</script>
</html>
3.html5+jquery实现拖拽上传图片并保存
<!DOCTYPE html>
<html lang>
<head>
<meta charset="UTF-8">
<title>H5+jquery拖拽</title>
<script src = "js/jquery-2.1.1.min.js"></script>
<style type="text/css">
.test{
width:100%;
height:600px;
}
#preview{
margin:15px;
width:500px; height:450px;
border:3px dashed gray;
border-radius: 8px;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
}
#drop_area{
margin:20px 70px;
color:orange; font-size: 25px;
font-family: Verdana,Arial,sans-serif;
}
</style>
</head>
<body>
<div class="test">
<div id="drop_area">将图片拖拽到此区域</div>
<div id="preview"></div>
</div>
</body>
<script>
$(function(){
//阻止浏览器默认行。
$(document).on({
dragleave:function(e){ //拖离
e.preventDefault();
},
drop:function(e){ //拖后放
e.preventDefault();
},
dragenter:function(e){ //拖进
e.preventDefault();
},
dragover:function(e){ //拖来拖去
e.preventDefault();
}
});
var box = document.getElementById('drop_area'); //拖拽区域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
return false;
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是图片!");
return false;
}
//拖拉图片到浏览器,可以实现预览功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //图片名称
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上传大小不能超过500K.");
return false;
}
var str = "<img src='"+img+"'><p>图片名称:"+filename+"</p><p>大小:"+filesize+"KB</p>";
$("#preview").html(str);
//上传
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
</script>
</html>
这里有几个重要的事件及其方法:
- multiple属性,允许用户选择多个文件。
- FileReader():用来提取文件的内容。
- readAsText():用来处理包含文本内容的文件(只能处理文本,而不是二进制,即.docx和.xlsx文件)
- readAsBinaryString():可以让应用处理二进制编码的数据。
- readAsArrayBuffer():这个方法将数据读到一个数组中,每个数组项代表一字节数据。
- readAsDataURL():让我们能方便的取得图片的数据。
- dragleave: 当文件拖离后触发事件
- drop:将文件拖到放置区后触发事件
- dragenter:将文本进入拖入区发生的事件
- dragover:将文本拖在放置区之上时