HTML5 文件上传示例

最新推荐文章于 2024-09-19 15:29:23 发布

TobbyKwok

最新推荐文章于 2024-09-19 15:29:23 发布

阅读量1.3k

点赞数

php 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

原文地址:

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. 下载

全部源代码