js文件上傳 文件下載
以前的文件的下載都是在服務器，現在也是放在服務器比較好，有時候為了一些開發的方便，我們臨時把處理的數據就放在了本地,然后自己訪問。這個也是可以的。
1.利用html5的 FileReader實現文件的上傳和寫出。這里的文件的輸出用的不是FileReader的api(FileReader的文件輸出接口太難用了)所以用了一個目前只有chrome支持Blob的東西（可能其他也支持不確定）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UFT-8">
<script src="https://cdn.bootcss.com/jquery/1.11.1-beta1/jquery.js"></script>
<script src="./FileSaver.js" charset="utf-8"></script>
</head>
<body >
<div>
<div>
<input type="file" id="files" style="display:none" onchange="fileimport();"/>
<input type="button" id="import" value="導入"/>
<input type="button" id="export" value="導出"/>
</div>
</div>
<script>
var txtdata;
function fileimport(){
var selectedFile = document.getElementById("files").files[0];//獲取讀取的File對象
console.log(selectedFile.length);
var name = selectedFile.name;//讀取選中文件的文件名
var size = selectedFile.size;//讀取選中文件的大小
console.log("文件名:"+name+"大小："+size);
var reader = new FileReader();//這里是核心！！！讀取操作就是由它完成的。
reader.readAsText(selectedFile,'gb2312');//讀取文件的內容，注意編碼方式
reader.onload = function(){
console.log(this.result);//當讀取完成之后會回調這個函數，然后此時文件的內容存儲到了result中。直接操作即可。
$('<pre>' + this.result + '</pre>').appendTo('body');
txtdata = this.result;
};
}
$(document).ready(function(){
//alert("start");
$("#import").click(function(){//點擊導入按鈕，使files觸發點擊事件，然后完成讀取文件的操作。
$("#files").click();
});
$("#export").click(function(){
var content = "這是直接使用HTML5進行導出的:"+txtdata;
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "file.txt");//saveAs(blob,filename) //僅限於chorme的下載目錄里
});
})
</script>
</body>
</html>
2.圖片的一個上傳。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0px;}
body{background:url("http://a1.qpic.cn/psb?/V108KcrI4Zm6Um/QqRefo*DZf*qDbFYlgL8z0mtU4IO8C.CPrQymvR.I3o!/b/dHUAAAAAAAAA&bo=AASAAgAAAAARB7Y!&rf=viewer_4");}
#Message{width:602px;height:140px;padding:10px; background:#fff; margin:100px auto; border-radius:5px;
position:relative;}
#Message #MesCon{width:600px;height:100px; border:1px solid #ddd; border-radius:5px;}
#Message #MesCon .imgBut{width:100px;height:100px; border-right:1px solid #ddd;float:left; font-size:12px; color:#666; text-align:center; line-height:150px; background:url("http://a1.qpic.cn/psb?/V108KcrI4Zm6Um/GTIZ8A5q1FSHpFqxM8xuM*KVuP5Sr*wSd4im08Mi5EE!/b/dHUAAAAAAAAA&bo=HgAXAAAAAAADACw!&rf=viewer_4") no-repeat 33px 30px;}
#Message #MesCon .Edit{width:499px;height:100px; float:right; }
#Message span.fb{width:80px;height:30px; background:#ff9933; color:#fff; text-align:center; line-height:30px;
display:block; margin-top:10px; float:right; border-radius:5px; font-size:12px; font-family:"微軟雅黑";}
#Message .upload{width:620px;height:220px; background:rgba(0,0,0,0.5); position:absolute;left:0px; top:160px;
box-shadow:0px 0px 10px #fff;display:none; }
#Message .upload p{width:100%; height:230px; position:absolute; left:0px; top:0px;color:#fff; font-size:26px; text-align:center;line-height:220px;}
#Message .upload img{margin:20px 8px; border:2px solid #fff;}
.shuoshuo{width:600px; min-height:300px; border:1px solid #ddd; border-radius:5px; margin:10px auto; background:#fff; padding:20px; display:none;
}
.shuoshuo .box{border-bottom:1px dotted #ddd; font-size:14px; line-height:30px;}
</style>
</head>
<body>
<div id="Message">
<!--發表說說框開始-->
<div id="MesCon">
<div class="imgBut">上傳圖片</div>
<div class="Edit" contenteditable="true"></div>
</div>
<!--發表說說框結束-->
<!--發表按扭開始-->
<span class="fb">發表</span>
<!--發表按扭結束-->
<!--圖片拖拽區開始-->
<div class="upload">
<p class="tis">請將圖片拖拽到此區域</p>
</div>
<!--圖片拖拽區結束-->
</div>
<!--說說內容開始-->
<div class="shuoshuo">
</div>
<!--說說內容結束-->
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
//點擊圖片上傳按扭
$(".imgBut").click(function(){
$(".upload").slideToggle(); //自動收縮和展開
});
//找到要拖進去的目標元素
var oDiv=$(".upload").get(0);
var op=$(".upload p.tis");
//當進入
oDiv.ondragenter=function(){
op.html("可以釋放元素");
}
//離開
oDiv.ondragleave=function(){
op.html("請將圖片拖拽到此區域");
};
//在內部移動
oDiv.ondragover=function(e){
e.preventDefault();
}
//釋放
oDiv.ondrop=function(e){
e.preventDefault();
//獲取拖過來的文件
var fs=e.dataTransfer.files;
var len=fs.length; //獲取文件個數
for(var i=0;i<len;i++){
var _type=fs[i].type;
if(_type.indexOf("image")!=-1){//判斷他是不是圖片文件
var fd=new FileReader();
fd.readAsDataURL(fs[i]);
fd.onload=function(){
var oImg=$("<img src='' width='180' height='180' />");
oImg.attr("src",this.result);
$(".upload").append(oImg);
op.html("");
}
}else{
alert("請，上傳圖片文件！！");
}
}
}
//點擊發表說說按扭
$("span.fb").click(function(){
$(".upload").slideUp();
var txt=$(".Edit").text();
if(txt==""){
$(".Edit").focus();
}else{
$(".shuoshuo").show();
var html=$(".shuoshuo").html();
$(".shuoshuo").html(html+"<div class='box'>"+txt+"<br/>"+$(".upload").html()+"</div>");
}
$(".upload").html("");
$(".Edit").text("");
});
</script>
</body>
</html>