<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function previewImage(){
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
//这里用来提示用户的浏览器不支持图片预览所使用FileReader接口
alert("你的浏览器不支持FileReader接口。无法看到图片预览");
//使选择控件不可操作
return false;
}
readAsDataURL("file","result");
}
//将文件以文本形式读入页面
/*
** in_file_id:上传文件的控件id
**show_area_id:要显示的区域的ID
*/
function readAsDataURL(input_file_id,show_area_id){
var file = document.getElementById(input_file_id).files[0];
//匹配上传的文件是不是图片(使用正则表达是判断)
if(!(/image\/\w+/.test(file.type))){
alert("您所选择的不是图片");
return false;
}
var reader = new FileReader();
//使用文件以DataURL形式读入页面
reader.readAsDataURL(file);
reader.οnlοad=function(e){
var result=document.getElementById(show_area_id);
//显示文件
// 查看img的src内容是什么 alert('<img src="' + this.result +'" alt="" />');
result.innerHTML='<img src="' + this.result +'" alt="" />';
}
}
//将文件以文本形式读入页面
/*
** in_file_id:上传文件的控件id
**encode:读取文件的编码方式
**showArea_id:要显示的区域的ID
*/
function readAsText(input_file_id,encode,showArea_id){
var file = document.getElementById(input_file_id).files[0];
var reader = new FileReader();
reader.readAsText(file,encode);
reader.οnlοad=function(f){
//显示文本文档
document.getElementById(showArea_id).innerHTML=this.result;
}
}
</script>
</head>
<body>
<p>
<input type="button" value="读取文本文件" οnclick="readAsText('file','UTF-8','result')" />
</p>
<!-- 要显示的位置-->
<div id="result" name="result"></div>
</body>
</html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function previewImage(){
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
//这里用来提示用户的浏览器不支持图片预览所使用FileReader接口
alert("你的浏览器不支持FileReader接口。无法看到图片预览");
//使选择控件不可操作
return false;
}
readAsDataURL("file","result");
}
//将文件以文本形式读入页面
/*
** in_file_id:上传文件的控件id
**show_area_id:要显示的区域的ID
*/
function readAsDataURL(input_file_id,show_area_id){
var file = document.getElementById(input_file_id).files[0];
//匹配上传的文件是不是图片(使用正则表达是判断)
if(!(/image\/\w+/.test(file.type))){
alert("您所选择的不是图片");
return false;
}
var reader = new FileReader();
//使用文件以DataURL形式读入页面
reader.readAsDataURL(file);
reader.οnlοad=function(e){
var result=document.getElementById(show_area_id);
//显示文件
// 查看img的src内容是什么 alert('<img src="' + this.result +'" alt="" />');
result.innerHTML='<img src="' + this.result +'" alt="" />';
}
}
//将文件以文本形式读入页面
/*
** in_file_id:上传文件的控件id
**encode:读取文件的编码方式
**showArea_id:要显示的区域的ID
*/
function readAsText(input_file_id,encode,showArea_id){
var file = document.getElementById(input_file_id).files[0];
var reader = new FileReader();
reader.readAsText(file,encode);
reader.οnlοad=function(f){
//显示文本文档
document.getElementById(showArea_id).innerHTML=this.result;
}
}
</script>
</head>
<body>
<p>
<label>请选择一个文件:</label>
<!--input file空间使用的是onchange事件控制显示图片-->
<input type="file" id="file" οnchange="previewImage()"/><input type="button" value="读取文本文件" οnclick="readAsText('file','UTF-8','result')" />
</p>
<!-- 要显示的位置-->
<div id="result" name="result"></div>
</body>
</html>