html5文件上传

上文介绍了如何通过ajax异步上传文件,html5对file的新接口,可以使得在页面上,对用户也有更好的体验。
页面上要做的,仅仅是添加一个html标签:
[cce lang=”html”]
<input id="track" name="track" type="file" multiple="multiple" onchange="showInfo();" />
[/cce]
这里在input的change事件上绑定了showInfo函数,当选择文件的时候,就会被触发。属性中增加multiple,表明这个标签支持多个文件。
showInfo的作用,顾名思义,就是读取上传文件的内容,展示给用户。这里是所有的代码:
[cce lang=”javascript”]
function showInfo() {
var fileList = document.getElementById('track').files;
var container = document.getElementById('sort_table');
//first clear
while (container.firstChild) {
container.removeChild(container.firstChild);
}
for(var i = 0; i < fileList.length; i++) {
var file = fileList[i];
var tr = document.createElement('tr');
tr.setAttribute("id", i);
tr.innerHTML = "<td>" + file.name + "</td><td>" + file.size + "</td";
container.appendChild(tr);
}
}
[/cce]
首先,先获取刚才那个标签包含的所有文件对象。然后清空显示容器。最后,遍历所有的文件,绘制一个table来显示。可以看见,我们可以额通过file接口方便的获取文件名称和大小。

这里可以实现的功能就是,用户选择多个文件,然后页面上就会显示出这些文件的名称和大小。有了类似的功能,可以让用户在上传之前确认自己要上传的文件,排序文件上传顺序(这里container id叫sort_table,就是因为使用了jquery-ui的sortable插件,支持用户通过拖拽排序文件)等操作。

转载自:https://coolex.info/blog/358.html

时间: 2016-03-24
Tags: file, html, HTML5

html5文件上传的相关文章

html5-基于Bootstrup 3可预览的HTML5文件上传插件,Ajax上传方式,如何做出响应?

问题描述 基于Bootstrup 3可预览的HTML5文件上传插件,Ajax上传方式,如何做出响应? http://www.htmleaf.com/html5/html5muban/201505091801.html 查看演示中,最后一个上传方式是用Ajax方式上传,那么如何才能做出响应呢? 我上传成功后显示 我书读的少,求大神告诉我这个应该怎么写? 解决方案 基于ajax的Html5文件上传插件,带进度并支持图片预览 解决方案二: http://blog.csdn.net/pkgray/art

为开发者和设计者准备的 HTML5 文件上传教程

本文主要是收集了一些使用 HTML5 进行文件上传的教程: 纯 HTML5 文件上传 带进度条的 HTML5 文件上传 HTML5 拖放式文件上传的 API 教程 全新的 HTML5 多文件上传 使用 jQuery 的 HTML5 文件上传 HTML5-powered Ajax file uploads HTML5 拖放式多文件上传

javascript HTML5文件上传FileReader API_javascript技巧

文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能.但过去WEB程序员都很清楚,用HTML表单上传文件是很麻烦的事情,特别是你想了解一下用户上传的文件的一些属性,必须等它上传完成后才能知道. 未知的东西上传到服务器上,有可能产生安全问题,也有可能体积太大,超过允许,浪费空间.现在好了,WEB技术在进步,HTML5带来了很多好东西.这个FileReader API就能让你在用户上传之前就能获取上传文件的一些基本属性. HTML代码 这个F

HTML5文件上传控件file实现多个文件上传

HTML5支持一次提交多个文件(只用一个<input>),只要为<input>元素添加 multiple 属性即可.添加后,用户就可以在打开的对话框中一次选择多个文件了(比如在Windows中按Ctrl键并单击多个文件,或者用鼠标拖出一个选择框) <!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>Read Text</t

Jquery结合HTML5实现文件上传_jquery

1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我们很容易的实现对文件的上传,只需要利用HTML5的一个FormData属性,结合Jquery就很容易实现文件的上传,而且读取文件的上传进度,下面这个上传案例就是基于上面所说的实现的,下面我将所所有的JS和CSS以及HTML页面代码放在下面. 注意事项:FormData属性必须依赖于HTML5,所以如

HTML5 Ajax文件上传进度条如何显示_AJAX相关

原本打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制,感觉都比较别扭.因为项目不考虑低版本浏览器,所以决定用html5实现.下面只是一个简单的demo,具体样式需要自己去做. 后台基于strut2进行文件处理,具体因项目而定.只是要注意设置文件大小的限制.  <constant name="struts.multipart.maxSize" value="52428800"/>这个配置

php 使用html5实现多文件上传实例_php实例

首先向大家介绍一下html5中file的multiple属性 定义和用法 multiple 属性规定输入字段可选择多个值.如果使用该属性,则字段可接受多个值. 实例: <form action="demo_form.asp" method="get"> Select images: <input type="file" name="img" multiple="multiple" />

javascript html5移动端轻松实现文件上传_javascript技巧

PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术主要是: ajax FileReader FormData HTML结构: <div class="camera-area"> <form enctype="multipart/form-data" method="post">

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯