您的位置：首页 > Web前端 > HTML5

HTML5笔记四：文件及图像上传

2016-07-21 17:42 375 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>

//将文件以Data URL形式进行读入页面
function dataURL(){
var file = document.getElementById('file').files[0];
//alert(file);
if(!/image\/\w+/.test(file.type)){
alert('不是图片');
return false;
}else{
var reader = new FileReader();
//将文件以Data URL形式进行读入页面
reader.readAsDataURL(file);
reader.onload = function(e){
var result = document.getElementById("result");
result.innerHTML = '<img src ="+this.result+" alt="?"/>';
}
}
}
//将文件以文本形式进行读入页面
function sText(){
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(){
var result = document.getElementById('result');
result.innerHTML = this.result;
}
}
//将文件以二进制形式进行读入页面
function binaryString(){
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(){
var result = document.getElementById('result');
result.innerHTML = this.result;
}
}
</script>
</head>
<body>
<form id="textform">
<input type="file" id="file"  />
<input type="button" value="读取图像"  onclick="dataURL()"/>
<input type="button" value="读取二进制数据"  onclick="binaryString()"/>
<input type="button" value="读取文本文件"  onclick="sText()"/>
</form>
<!--结果 -->
<div id="result">

</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>H5上传文件图片</title>
<script>
function showF(){
var file;
for(var i = 0;i<document.getElementById('file').files.length;i++){
file = document.getElementById('file').files[i];
alert(file.name);
}
}
function showT(){
var file;
file = document.getElementById('file2').files[0];
var size = document.getElementById('size');
var type = document.getElementById('type');
size.innerHTML = file.size;
type.innerHTML = file.type;

}
function showU(){
var file;
for(var i = 0;i<document.getElementById('file3').files.length;i++){
file = document.getElementById('file3').files[i];
if(!/image\/\w+/.test(file.type)){
alert('不是图片');
}else{
alert('图片');
}
}
}
</script>
</head>

<body>
<!--多文件上传 multiple-->
<form id="textform">
<input id="file" type="file" multiple>
<input type="button" value="文件上传" onclick = "showF()">
</form>
<br/> <!--上传文件的字节和类型 -->
<form id="text2form">
<input type="file" id="file2">
<input type="button" value="显示文件信息" onClick="showT()">
文件字节长度 <span id="size"></span> <br/>
文件类型 <span id="type"></span>
</form>
<br/> <!--是否是图片是图片就上传 -->
<!--默认显示图片类型 -->
<form id="text4form">
<input type="file" id="file3" multiple accept="iamge/*">
<input type="button" value="显示文件信息" onClick="showU()">
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航