<!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
分享到：
相关推荐
随着HTML5技术的发展，文件上传功能得到了显著提升，不再局限于简单的单文件上传，而是支持多文件选择、文件预览、进度显示等功能，极大地提升了用户体验。 HuploadifyV2.0-master 是一个具体的HTML5文件上传插件...
在现代Web开发中，JavaScript和HTML5的结合为我们提供了丰富的功能，其中之一就是多文件上传。在本项目中，"javascript+HTML5 多文件上传（插件）多进度条显示"是一个实现这一功能的实例，它允许用户选择并上传多个...
HTML5多文件上传是Web开发中的一个重要特性，它允许用户通过浏览器一次性选择并上传多个文件。这个特性极大地提升了用户体验，特别是在处理大量图片、文档或其他文件时。在C#开发环境中，我们可以利用HTML5的File ...
标题中的“基于Bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip”指的是一个使用Bootstrap 3框架和HTML5技术实现的高级文件上传功能。这个插件允许用户通过拖放操作上传文件，并且在上传前可以...
HTML5是一种先进的网页标准，它在原有的HTML基础上引入了许多新的特性和功能，其中包括对多文件上传的支持。在本文中，我们将深入探讨HTML5如何实现多文件上传以及预览效果，结合源码分析来帮助你理解和应用这些技术...
这是一个基于Spring MVC和HTML5的多文件上传的实例，前端实现全部采用JavaScript完成，有进度条显示，同时有上传状态。后台由一个文件上传的Controller控制，非常方便。对不想使用插件上传的人，可以看看这个参考。
总结起来，HTML5的多文件上传功能结合FileReader API和适当的JavaScript处理，能够实现用户友好的文件上传体验。在实际项目中，还需要考虑服务器端的配合以及各种安全策略，以确保文件上传功能的完整性和安全性。
【标签】：Bootstrap-fi 和多文件上传 Bootstrap-fi 指的是Bootstrap-fileinput，它是基于流行的前端框架Bootstrap构建的。Bootstrap以其响应式设计和易用性著称，使得Bootstrap-fileinput在视觉效果和交互上都能与...
本文将深入探讨两种实现多文件上传的技术：HTML5和Flash，以及如何在.NET环境中进行集成。 HTML5多文件上传是现代浏览器支持的一项功能，极大地改进了传统单一文件上传的用户体验。在HTML5中，`<input type="file">...
总的来说，HTML5文件上传是一个强大的工具，它为开发者提供了更多控制和改进用户体验的机会。通过结合`<input type="file">`标签、`FormData`、`XMLHttpRequest2`、File API以及相应的安全机制，开发者可以构建出...
在现代Web应用中，文件上传是一项...通过分析`HtmlLargeFileUpload.sln`和`HtmlLargeFileUpload`项目文件，我们可以深入了解这个系统是如何利用HTML5特性来处理大文件上传的，以及如何通过AJAX和进度条增强用户体验。
在这个场景中，我们关注的是HTML5在上传视频和图片方面的应用，特别是如何实现预览和多文件上传功能。 在HTML5中，`<input type="file">`元素得到了极大的增强，它允许用户选择本地文件进行上传，并且可以通过...
在IT领域，大文件上传和多文件上传是两个常见的需求，尤其在云存储、文件分享、协同工作等场景中显得尤为重要。以下是对这两个知识点的详细解释： 大文件上传： 大文件上传是指允许用户上传超过一般浏览器或服务器...
10. **用户界面优化**：为了让用户有更好的交互体验，上传界面应清晰展示文件上传进度、状态和操作选项，如暂停、恢复、删除等。 综上所述，这个"多文件上传 源码"涵盖了文件选择、读取、包装、异步上传、进度追踪...
考虑到性能，可以使用异步上传和多线程处理文件，减少用户等待时间。同时，确保服务器有足够的磁盘空间，并合理配置服务器的内存和文件系统，以应对大量文件上传。 10. **异常处理**： 在整个文件上传过程中，...
标题中的“html5 + ASP +Ajax 前端...综上所述，这个技术方案提供了一种基于HTML5、ASP和Ajax的前端无刷新、多文件批量上传的实现方法，通过浏览器的原生功能和JavaScript编程实现了高效且用户体验良好的文件上传功能。
以上就是使用HTML5和WebSocket实现多文件同时上传的基本原理和步骤。这种方法不仅可以提高上传效率，还能提供更好的用户体验，因为用户可以看到每个文件的实时上传进度。需要注意的是，WebSocket在某些环境中可能不...
在提供的"html5uploader"压缩包文件中，可能包含了实现HTML5多文件上传功能的前端脚本和后台控制类。这些资源可能包括HTML模板、JavaScript代码、CSS样式以及服务器端的处理脚本。使用这些资源，开发者可以快速集成...
在.NET框架中，C#语言提供了丰富的功能来处理文件上传操作。对于初学者来说，理解并实现多文件上传是一项重要的技能，它可以帮助你构建交互性强、功能完善的Web应用程序。在这个"C# .NET FileUpload 多文件上传例子...
HTML5上传插件是利用HTML5技术实现的一种增强网页文件上传功能的工具，它极大地提升了用户在网页上处理文件和图片的体验。HTML5引入了许多新的API和特性，其中包括File API、FormData对象以及拖放（Drag and Drop）...