V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Charming6
V2EX  ›  JavaScript

移动设备在线预览图片

  •  
  •   Charming6 · 2015-09-07 19:54:18 +08:00 · 2354 次点击
    这是一个创建于 3349 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在工作的过程中遇到了一个问题,就是在移动设备上图片上传的问题。考虑到在移动设备上,所以为不防止出现差用户体验,所以用到了 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 返回的。

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

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1122 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 19:01 · PVG 03:01 · LAX 11:01 · JFK 14:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.