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>

　　

js实现文件的上传和输出,拖拽上传图片的更多相关文章

  1. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  2. C# 用原生JS进行文件的上传

    1.此文章是用原生JS来进行文件的上传,有两个版本,一个不用ajax,一个用ajax. 1)非AJAX <!DOCTYPE html> <html> <head> ...

  3. js分割文件快速上传

    <?php header('Content-type:text/html;charset=UTF-8'); ?> <?php if ($_FILES) { if(!file_exis ...

  4. Ext.js多文件选择上传,

    工作了之后来到了一家用Ext.js的公司, 一开始的时候做项目, 我被分给一个做一个单表的增删改查, 再加上文件上传功能, 带我的老师让我自己研究一下Ext.js怎么多文件选择上传, 并且能获取到上传 ...

  5. js大文件分块上传断点续传demo

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  6. nodeJs + js 大文件分片上传

    简单的文件上传 一.准备文件上传的条件: 1.安装nodejs环境 2.安装vue环境 3.验证环境是否安装成功 二.实现上传步骤 1.前端部分使用 vue-cli 脚手架,搭建一个 demo 版本, ...

  7. js大文件分割上传

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. asp.net 基于ajaxfileupload.js 实现文件异步上传

    前台代码: /*修改头像*/       //上传       function _sc() {           $(".ckfile").html("") ...

  9. jQuery插件之路(三)——文件上传（支持拖拽上传）

    好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下, ...

随机推荐

  1. Java中断异常 InterruptedException 的正确处理方式

    你看到这篇文件可能是因为你已经调用了一个抛出 InterruptedException 异常的方法,并且需要以某种方式处理它. 首先,需要了解为一个方法为啥会 throws InterruptedEx ...

  2. neutron 的 quota design

    发现, cinder, nova 制实现了, CountableResource. 只有nuetron实现了 TrackedResource 和 CountableResource. I read u ...

  3. shell脚本一键安装redis

    支持识别离线包和联网安装,自动修改使用后台运行模式,离线安装的方法是,将离线包和脚本放在同一个文件夹, 它会先识别有没有离线包, 有离线包就先安装离线包, 没有离线包就安装进行判断机器是否能联网, 能 ...

  4. Codeforces 37D Lesson Timetable - 组合数学 - 动态规划

    题目传送门 神奇的门I 神奇的门II 题目大意 有$n$组学生要上课2次课,有$m$个教室,编号为$1$到$m$.要确定有多少种不同的安排上课的教室的方案(每组学生都是本质不同的),使得它们满足: 每 ...

  5. 树之105 Construct Binary Tree from Preorder and Inorder Traversal

    题目链接:https://leetcode-cn.com/problems/construct-binary-tree-from-preorder-and-inorder-traversal/ 参考链 ...

  6. 如何生成指定架构的Linux内核默认配置文件

    答: make ARCH=<cpu architecture> defconfig 举例如下: make ARCH=arm64 defconfig (编译系统将会去目录arch/arm64 ...

  7. FJUT seventh的tired树上路径（01字典树）题解

    思路(来自题解): 众所周知树上两个点xy的距离是deep[x]+deep[y]-deep[lca(x,y)]*2 然后我们把这个加减法换成异或,我们就会发现,deep[lca(x,y)]被消掉了 所 ...

  8. Python之Requests的高级用法

    # 高级用法 本篇文档涵盖了Requests的一些更加高级的特性. ## 会话对象 会话对象让你能够跨请求保持某些参数.它也会在同一个Session实例发出的所有请求之间保持cookies. 会话对象 ...

  9. LuoguP3948 数据结构

    题目地址 题目链接 题解 以为这题虽然是数据随机也不至于那么水吧... 于是秉着先打部分分和暴力的原则先写了暴力和min,max为-inf和inf的特殊点,对于暴力搞了个小优化,延后的操作直接前缀和答 ...

  10. 深度学习 目标检测算法 SSD 论文简介

    深度学习 目标检测算法 SSD 论文简介 一.论文简介: ECCV-2016 Paper:https://arxiv.org/pdf/1512.02325v5.pdf  Slides:http://w ...