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>