HTML5 文件上传示例
来源:互联网 发布:python array split 编辑:程序博客网 时间:2024/06/08 12:35
原文地址:
http://www.webcodegeeks.com/html5/html5-file-upload-example/
本文将为大家展示如何使用HTML5来读取用户选择的文件信息并将文件上传到一个服务器上.
FileApi是HTML5新添加的功能中最有趣的一个. 我们可以在文件上传到服务器前读取显示文件的信息, 并且可以不使用post表单的方式来发送文件.
下文将展示如何读取用户选择的文件信息, 并使用Ajax异步上传这些文件.
1.显示文件信息
1.1: 只有一个文件的情况
HTML代码如下
<input type="file" id="fileinput" />
当用户选择一个文件时, 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 type="file" id="fileinput" multiple="multiple" />
我们只需要在input元素中添加”multiple”属性, 这样就可以允许用户选择多个文件上传.
document.getElementById('fileinput').addEventListener('change', function(){ for(var i = 0; i<this.files.length; i++){ var file = this.files[i]; // This code is only for demo ... console.group("File "+i); console.log("name : " + file.name); console.log("size : " + file.size); console.log("type : " + file.type); console.log("date : " + file.lastModified); console.groupEnd(); }}, false);
小结: 您还可以添加”accept”标签来过滤用户可以上传的文件类型. 例如, 当您只希望用户上传图片时, 只需要过滤出MIME类型”image/*”即可:
<input type="file" id="fileinput" multiple="multiple" accept="image/*" />
1.3 预览文件
我们既可以读取文件信息, 也能读取文件的内容. 例如, 我们可以在上传之前预览文件.
以预览图片举例:
HTML代码如下:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Preview images</title> <style> #gallery .thumbnail{ width:150px; height: 150px; float:left; margin:2px; } #gallery .thumbnail img{ width:150px; height: 150px; } </style></head><body><h2>Upload images ...</h2><input type="file" id="fileinput" multiple="multiple" accept="image/*" /><div id="gallery"></div><script src="gallery.js"></script></body></html>
使用JavaScript来管理文件上传.
gallery.js
var uploadfiles = document.querySelector('#fileinput');uploadfiles.addEventListener('change', function () { var files = this.files; for(var i=0; i<files.length; i++){ previewImage(this.files[i]); }}, false);
previewImage函数将会显示用户选择的文件.
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方法来上传选中的文件.
<input type="file" id="uploadfiles" multiple="multiple" />
Js如下:
var uploadfiles = document.querySelector('#uploadfiles');uploadfiles.addEventListener('change', function () { var files = this.files; for(var i=0; i<files.length; i++){ uploadFile(this.files[i]); //上传文件 }}, false);
PHP脚本如下:
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 文件上传示例
- HTML5 上传文件极简示例
- HTML5实现多文件的上传示例代码
- html5上传文件 file API -XMLHttpRequest 2 示例
- html5实现多文件的上传示例代码
- HTML5完整版本上传示例
- html5图片上传【文件上传】
- HTML5文件上传
- html5 java 文件上传
- HTML5 文件上传
- HTML5 异步上传文件
- html5 进度条上传文件
- html5---上传文件
- html5 文件上传预览
- html5 自定义文件上传
- html5异步上传文件
- html5 ajax文件上传
- HTML5文件上传
- 单例设计模式
- windows常用dos命令
- Redhat安装gem包报错“no such file to load — zlib”以及ruby的openssl扩展等错误的修正
- [尺取法] poj3320 Jessica's Reading Problem
- Android 存储学习之保存系统短信到SD卡
- HTML5 文件上传示例
- Codeforces 547B Mike and Feet(单调栈)
- HDU5323.Solve this interesting problem
- Linux搭建wordpress
- 斐波那契数列
- android与javascript的交互
- Numpy中矩阵对象(matrix)
- 广播接收器动态注册
- ucp2p 库:二、编译使用