<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<title>example: file upload</title>
<script type="text/javascript">
$(function(){
$('#showfilename').click(function(e){
var filelist = document.getElementById('files').files;
for(var i=0; i<filelist.length; i++){
$('#name').append('<span>'+filelist[i].name+'</span><br>');
}
})
$('#showfilecontent').click(function(e){
var file = document.getElementById('files').files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e){
var content = this.result;
$('#content').append('<span>'+content+'</span><br>');
}
})
$('#showimage').click(function(e){
var file = document.getElementById('files').files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var url = this.result;
$('#image').append('<img alt='+file.name+' src='+url+'><br>');
}
})
})
</script>
</head>
<body>
<form action="/home">
<input type=file multiple="multiple" name=files id=files ><br>
<input type=button value="show file name" id=showfilename><br>
<input type=button value="show file content" id=showfilecontent ><br>
<input type=button value="show image" id=showimage ><br>
File name:<br>
<div id=name></div><br>
File content:<br>
<div id=content></div><br>
Show image:<br>
<div id=image></div><br>
</form>
</body>
</html>
参考文件:
http://www.w3.org/TR/FileAPI/
http://www.cnblogs.com/fly_dragon/archive/2012/06/02/2532035.html
分享到:
相关推荐
这是一个基于Spring MVC和HTML5的多文件上传的实例,前端实现全部采用JavaScript完成,有进度条显示,同时有上传状态。后台由一个文件上传的Controller控制,非常方便。对不想使用插件上传的人,可以看看这个参考。
HTML5多文件上传带预览效果源码下载 HTML5多文件上传带预览效果源码下载
可以参考 C#开发的html5多文件上传源代码 互相交流学习
html5和js多文件上传插件。可任意多文件选择上传,每个文件都可以显示进度,同时可以显示整体进度。采用了html的file对象和blob对象的属性和方法。
HTML5实现多文件上传,实现多文件上传的功能,引用文件,初始化demo.js 实现功能
基于.net实现的 html5多文件上传,还有一个是基于flash的多文件上传
HTML5 文件上传
html5多文件上传前后台脚本和后台控制类
HTML5实现多文件图片预览上传实例代码 HTML5实现多文件图片预览上传实例代码
html5上传插件支持文件上传和图片上传代码 html5上传插件支持文件上传和图片上传代码
html5上传视频和图片 可预览上传,支持多文件上传, HTML5+js 文件想小,简单好用。后端结合PHP等语言。
html5 文件上传,文件操作api,html5 file api
本HTML5实现多文件图片预览上传功能实例,使用zyFile.js插件
多文件上传,带进度条,支持主流浏览器,不支持IE,因为采用的是html5的技术。使用ajax提交表单,方便修改。不使用三方文件上传控件。
HTML多文件上传的js插件,可一次上传多个文件.zip
前端Javascript+Html5+后端PHP分块上传文件,PHP分块上传大文件,该项目可以正常运行,入口为index.html,需要正确配置fileDir的读写权限 目前有测试过上传1.5G左右的没有问题(未测试更大的文件),理论上更大的...
客户端完全基于JavaScript的浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务端处理,由服务端存储断点信息实现断点...
php文件上传 html5文件上传 进度条 无刷新 input.files xhr.upload.progress
HTML5 PHP jquery uploadify上传文件,带进度条,author:吕大豹。仿照uploadify写的,www.codesc.net已做过修正,本例的配置参数均与uploadify官网一致,参照官网的api就可以了,直接把文件夹上传到支持php的服务器...
基于html5的文件上传,带有进度条,采用ajax表单方式提交,方便修改。