ファイルリンク読み出しプログラム
7893 ワード
宣言
最近は春の招き手が盛んに行われています.大牛もシロも、電気を受ける時にはどうしても心が落ち着かなくて、リンクを読み取るプログラムが必要です. 目的:ファイルの内容を読み取り、ファイル内のリンクを読み出し、ブラウザ内で新しいウィンドウを開きます.
ファイルを読み込みます
JavaScriptはファイルの内容を読み取るための特別なAPIがありません.HTMLのinput[type="file]はファイルを取得できますが、ファイルの内容を取得するのは難しいです.ビルの主人も長い間悩みました. 実際、Ajaxを使えば多くのものが簡単になりますが、ビル主の目的はバックグラウンドの加工を経たくないです.直接ブラウザを使ってファイルの内容を読み取ることができれば、完璧です.確かにビルの主人はブラウザがこの方面のAPIがあるかどうか調べてみました.功夫は人を背負っていないで、ビルの主はCSDNの上の一面のブログの中で関連しているAPIを探し当てて、つまりHTML 5の1つの新しいインターフェース——filereader.興味のある方はこのリンクを見てください.この中にはHTML 5の最新のインターフェースがあります.ファイルを読み込むコードを添付します.
ファイルの内容を解析
私達はAJAXがファイルの内容を読んでXMLとJsonかもしれないことを知っていますが、文字列の本質から逃げられません.ここで読み取った内容は文字列です.続いて正則を利用して私たちが必要な情報(URL)を抽出します.正則コード:
ファイルの情報を読み込みます.
私たちが知っているのはHTMLのinput[type="file]でファイルの名前を読み込むことができますが、足りないのはCSSでフォーマットを変えることができません.シミュレーションポップアップボックスに従って、シミュレーションプロンプトボックスの構想を元に、ファイル情報を取得してから、input要素にlabelを追加することによって、ファイルの読み込みをシミュレートします. あとはシンプルなデザインの設定です.
完全なコードを添付:
最近は春の招き手が盛んに行われています.大牛もシロも、電気を受ける時にはどうしても心が落ち着かなくて、リンクを読み取るプログラムが必要です. 目的:ファイルの内容を読み取り、ファイル内のリンクを読み出し、ブラウザ内で新しいウィンドウを開きます.
ファイルを読み込みます
JavaScriptはファイルの内容を読み取るための特別なAPIがありません.HTMLのinput[type="file]はファイルを取得できますが、ファイルの内容を取得するのは難しいです.ビルの主人も長い間悩みました. 実際、Ajaxを使えば多くのものが簡単になりますが、ビル主の目的はバックグラウンドの加工を経たくないです.直接ブラウザを使ってファイルの内容を読み取ることができれば、完璧です.確かにビルの主人はブラウザがこの方面のAPIがあるかどうか調べてみました.功夫は人を背負っていないで、ビルの主はCSDNの上の一面のブログの中で関連しているAPIを探し当てて、つまりHTML 5の1つの新しいインターフェース——filereader.興味のある方はこのリンクを見てください.この中にはHTML 5の最新のインターフェースがあります.ファイルを読み込むコードを添付します.
<script type="text/javascript">
var result=document.getElementById("result");
var file=document.getElementById("file");
// FileReader
if(typeof FileReader == 'undefined'){
result.InnerHTML="<p> FileReader ！</p>";
//
file.setAttribute("disabled","disabled");
}
function readAsDataURL(){
//
var file = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert(" ， ！");
return false;
}
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 readAsBinaryString(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//
reader.readAsBinaryString(file);
reader.onload=function(f){
var result=document.getElementById("result");
//
result.innerHTML=this.result;
}
}
function readAsText(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//
reader.readAsText(file);
reader.onload=function(f){
var result=document.getElementById("result");
//
result.innerHTML=this.result;
}
}
</script>
<p>
<label> ：</label>
<input type="file" id="file" />
<input type="button" value=" " onclick="readAsDataURL()" />
<input type="button" value=" " onclick="readAsBinaryString()" />
<input type="button" value=" " onclick="readAsText()" />
</p>
<div id="result" name="result"></div> ファイルの内容を解析
私達はAJAXがファイルの内容を読んでXMLとJsonかもしれないことを知っていますが、文字列の本質から逃げられません.ここで読み取った内容は文字列です.続いて正則を利用して私たちが必要な情報(URL)を抽出します.正則コード:
/[a-z]+\:\/\/[a-z,0-9]+[\.a-z,0-9]+[\/a-z,0-9,\?,\-,\=,\_,A-Z]+[.a-z]+/g;ファイルの情報を読み込みます.
私たちが知っているのはHTMLのinput[type="file]でファイルの名前を読み込むことができますが、足りないのはCSSでフォーマットを変えることができません.シミュレーションポップアップボックスに従って、シミュレーションプロンプトボックスの構想を元に、ファイル情報を取得してから、input要素にlabelを追加することによって、ファイルの読み込みをシミュレートします. あとはシンプルなデザインの設定です.
完全なコードを添付:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title> </title>
<style>
.container{
width:280px;
height:470px;
position: relative;
left:-160px;
margin-left:50%;
background: url(bg.jpg);
background-size: cover;
border-radius: 5px;
border:1px solid #D0EEFF;
box-shadow: 1px 4px 4px 1px #8B8B8B;
padding-left:20px;
padding-right:20px;
}
.file {
display: inline-block;
background: #D0EEFF;
border:1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color:#1E88C7;
line-height: 30px;
font-size: 1.5em;
margin-top:10px;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
}
#openLink,#get{
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color:#1E88C7;
line-height: 20px;
}
input[type="file"]{
display: none;
}
#name,#size,#type{
color:blue;
font-family: " ";
font-weight: bold;
}
.intro{
color:white;
font-family: " "," "," ";
}
header{
text-align: center;
font-size: 1.5em;
color: #000;
}
footer{
text-align: center;
color: #000;
}
</style>
</head>
<body>
<div class="container">
<header>
</header>
<label class="file" for="file"> </label>
<input type="file" accept="" class="file" id="file" />
<div id="content">
<p id="name"> ：</p>
<p id="size"> ：</p>
<p id="type"> ：</p>
</div>
<button id="openLink"> </button>
<button id="get"> </button>
<div class="intro">
<h4> ：</h4>
<p>
1. ( txt） " " ， " " ；
</p>
<p>
3. ， “ ” ；
</p>
</div>
<footer>Create by </footer>
</div>
</body>
<script type="text/javascript">
// FileReader
if(typeof FileReader == 'undefined'){
alert(" ！");
//
file.setAttribute("disabled","disabled");
}
document.getElementById("openLink").onclick=function(){
var result=document.getElementById("result");
var file=document.getElementById("file");
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//
reader.readAsText(file);
reader.onload=function(){
var result=document.getElementById("result");
//
var str=this.result;
var pattern=/[a-z]+\:\/\/[a-z,0-9]+[\.a-z,0-9]+[\/a-z,0-9,\?,\-,\=,\_,A-Z]+[.a-z]+/g;
var arr=str.match(pattern);
var txt="";
for(var i=0; i<arr.length;i++){
window.open(arr[i]);
}
}
}
document.getElementById("get").onclick=function(){
var file=document.getElementById("file").files;
var name=document.getElementById("name");
name.innerHTML=" ："+file[0].name;
size.innerHTML=" ："+file[0].size+" ";
type.innerHTML=" ："+file[0].type;
}
</script>
</html>