移动设备在线预览图片

在工作的过程中遇到了一个问题，就是在移动设备上图片上传的问题。考虑到在移动设备上，所以为不防止出现差用户体验，所以用到了 HTML5 中的 FileReader ；

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
var_dump (array (
'GET' => $_GET,
'POST' => $_POST,
'FILES' => $_FILES,
));

foreach ($_FILES as $file ) {
        echo "file ", $file['tmp_name'], PHP_EOL;
        echo "   size is ", filesize ($file['tmp_name']), PHP_EOL;
    }

    return;
}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="applicable-device"content="mobile">
<style type="text/css">
img{
width: 320px;
}
#result div{
margin: 2em;
border: 1px solid darkgray;
white-space: pre;
}
</style>
</head>
<body>
<ul id="images"></ul>
<input type="file" id="addImg" value="add images" accept="image/*" multiple="multiple" />
<input type="submit" id="submit" value="submit">
<div id="result"></div>
<script>
(function (){
var images = [];
var $addImg = document.getElementById ('addImg');
var $images = document.getElementById ('images');
var $submit = document.getElementById ('submit');
var $result = document.getElementById ('result');

$addImg.addEventListener ('change', function (){
            for (var i = 0; i < $addImg.files.length; i++){
                (function (file ){
                    var reader = new FileReader ();
                    reader.onload = function (){
                        var $img = document.createElement ('img');
                        $img.src = reader.result;
                        var $li = document.createElement ('li');
                        $li.appendChild ($img );
                        $images.appendChild ($li );
                        images.push (file );
                    };
                    reader.readAsDataURL (file );
                })($addImg.files[i]);
            }
        });

        $submit.addEventListener ('click', function (){
            var data = new FormData ();
            for (var i = 0; i < images.length; i++){
                data.append ('images' + i, images[i]);
            }
            var xhr = new XMLHttpRequest ();
            xhr.onreadystatechange = function (){
                console.log ('ready state change: ' + xhr.readyState + ' -- ' + xhr.status + ' (' + xhr.statusText + ")");
                if (xhr.readyState == 4 ){ // done.
                    var $div = document.createElement ('div');
                    $div.innerHTML = xhr.responseText;
                    $result.appendChild ($div );
                }
            };
            xhr.open ('POST', location.href );
            xhr.send (data );
        });
    })();
</script>

</body>
</html>
大概就是给 type 为 file 的 input 添加一个 change 事件，然后遍历选中的文件，增加一个文件就增加一个 li ，然后将 li 插入到 ul 中。重要的是 reader.readAsDataURL (file );这个是将文件读成编码的形式。$img.src = reader.result;将 src 设成 reader 返回的。

下面的那个就是添加了一个点击事件，将收集到的文件传到服务端。