原文地址:
http://www.webcodegeeks.com/html5/html5-file-upload-example/
本文将为大家展示如何使用html5来读取用户选择的文件信息并将文件上传到一个服务器上.
fileapi是html5新添加的功能中最有趣的一个. 我们可以在文件上传到服务器前读取显示文件的信息, 并且可以不使用post表单的方式来发送文件.
下文将展示如何读取用户选择的文件信息, 并使用ajax异步上传这些文件.
1.显示文件信息
1.1: 只有一个文件的情况
html代码如下

当用户选择一个文件时, inpupt元素会产生“change”事件, 所以我们可以监听这个事件:
document.getelementbyid('fileinput').addeventlistener('change', function(){ var file = this.files[0]; // this code is only for demo ... console.log(name : + file.name); console.log(size : + file.size); console.log(type : + file.type); console.log(date : + file.lastmodified);}, false);
如您所见, fileapi使用起来非常简单, 它在input元素中添加了”files”属性.
小结: “files”属性不可写, 只能读取其中的内容. 您可能注意到了, 使用this.files[0]就可以获得用户已选择的第一个文件.
1.2: 多个文件
现在我们要显示用户选择的全部文件信息.
html代码如下

我们只需要在input元素中添加”multiple”属性, 这样就可以允许用户选择多个文件上传.
document.getelementbyid('fileinput').addeventlistener('change', function(){ for(var i = 0; i小结: 您还可以添加”accept”标签来过滤用户可以上传的文件类型. 例如, 当您只希望用户上传图片时, 只需要过滤出mime类型”image/*”即可:

1.3 预览文件
我们既可以读取文件信息, 也能读取文件的内容. 例如, 我们可以在上传之前预览文件.
以预览图片举例:
html代码如下:
preview imagesupload images ...

使用javascript来管理文件上传.
gallery.js
var uploadfiles = document.queryselector('#fileinput');uploadfiles.addeventlistener('change', function () { var files = this.files; for(var i=0; ipreviewimage函数将会显示用户选择的文件.
gallery.js
function previewimage(file) { var galleryid = gallery; var gallery = document.getelementbyid(galleryid); var imagetype = /image.*/; if (!file.type.match(imagetype)) { throw file type must be an image; } var thumb = document.createelement(div); thumb.classlist.add('thumbnail'); // add the class thumbnail to the created div var img = document.createelement(img); img.file = file; thumb.appendchild(img); gallery.appendchild(thumb); // 使用filereader来显示图片内容 var reader = new filereader(); reader.onload = (function(aimg) { return function(e) { aimg.src = e.target.result; }; })(img); reader.readasdataurl(file);}
我们引入了filereader对象来异步读取文件内容. 通过使用new filereader来实例对象, 然后调用readasurl方法读取文件的数据.onload方法在文件内容读取结束后像事件一样被调用, 然后文件内容会被赋值到image元素的src属性中: aimg.src = e.target.result;
2.上传文件
我们使用xmlhttprequest(ajax)来上传文件.
每一个用户选择的文件都会创建一个http请求发送到服务器上.
首先, 定义一个包含xmlhttprequest的方法来上传文件.
function uploadfile(file){ var url = 'server/index.php'; var xhr = new xmlhttprequest(); var fd = new formdata(); xhr.open(post, url, true); xhr.onreadystatechange = function() { if (xhr.readystate == 4 && xhr.status == 200) { // every thing ok, file uploaded console.log(xhr.responsetext); // handle response. } }; fd.append(upload_file, file); xhr.send(fd);}
这个方法将会生成一个ajax请求(通过post方式)到指定的url, 并发送”upload_file”请求参数中的文件内容. 我们可以通过$_files[‘upload_file’]来获得这个参数.
现在, 我们将使用uploadfile方法来上传选中的文件.

js如下:
var uploadfiles = document.queryselector('#uploadfiles');uploadfiles.addeventlistener('change', function () { var files = this.files; for(var i=0; iphp脚本如下:
if (isset($_files['upload_file'])) { if(move_uploaded_file($_files['upload_file']['tmp_name'], datas/ . $_files['upload_file']['name'])){ echo $_files['upload_file']['name']. ok; } else { echo $_files['upload_file']['name']. ko; } exit;} else { echo no files uploaded ...;}
3. 下载
全部源代码
以上就介绍了html5 文件上传示例，包括了方面的内容，希望对php教程有兴趣的朋友有所帮助。