推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 3762 天前的主题，其中的信息可能已经有所发展或是发生改变。
在工作的过程中遇到了一个问题，就是在移动设备上图片上传的问题。考虑到在移动设备上，所以为不防止出现差用户体验，所以用到了 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=">
<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 返回的。
下面的那个就是添加了一个点击事件，将收集到的文件传到服务端。
目前尚无回复
Select Language