我总是发现自己渴望的能力是拖拽上传文件夹到一个web应用程序。所以上传多个文件是一个有趣的了不起的进步。
但是现在我提供给你 webkitdirectory !
视频演示：用HTML5 webkitdirectory上传文件夹 。
注意：这只会在一个最新的webkit的浏览器上运行。webkitdirectory目前不是标准 ，纯粹是为了玩。我不建议你在正式环境部署这个应用程序。
I had the pleasure of having a little play around with this when I should have probablybeen working with processing for university but I do like to procrastinate。（此略）
所以，干脆痛快：
html 代码
很简单，对吗?
确实啊!上PHP代码。
PHP 代码
if($_FILES['file_input']){
$uploads = UpFilesTOObj($_FILES['file_input']);
$fileUploader=new FileUploader($uploads);
}
class FileUploader{
public function __construct($uploads,$uploadDir='uploads/'){
foreach($uploads as $current)
{
$this->uploadFile=$uploadDir.$current->name.".".get_file_extension($current->name);
if($this->upload($current,$this->uploadFile)){
echo "Successfully uploaded ".$current->name."n";
}
}
}
public function upload($current,$uploadFile){
if(move_uploaded_file($current->tmp_name,$uploadFile)){
return true;
}
}
}
function UpFilesTOObj($fileArr){
foreach($fileArr['name'] as $keyee => $info)
{
$uploads[$keyee]->name=$fileArr['name'][$keyee];
$uploads[$keyee]->type=$fileArr['type'][$keyee];
$uploads[$keyee]->tmp_name=$fileArr['tmp_name'][$keyee];
$uploads[$keyee]->error=$fileArr['error'][$keyee];
}
return $uploads;
}
function get_file_extension($file_name)
{
return substr(strrchr($file_name,'.'),1);
}
我也一直在准备做MooTools脚本异步上传文件。所以请继续关注。
我很高兴听到任何意见或建议。
好运。
更新：
上传时保持目录结构 ：
所以最近我一直在玩很多新的文件API和一些图像处理等。在javascript中,我有巨大的乐趣这样做!我已经看到很多人问文件夹上传,这是一个令人兴奋的新发展。大多数人似乎有上传文件夹时保留文件结构的问题。
在上传时是有可能保持文件夹的结构的。在写作时，我一直无法找到一个等价的不使用webkit的浏览器。
这篇文章仅供测试！
我正在写一个完整的AJAX文件夹上传脚本，但是我做时，我会去发一些我发现有趣的小代码片段。
因此,闲话少说,上代码:
document.getElementById('files').onchange = function(e) {
var files = e.target.files; // FileList
for (var i = 0, f; f = files[i]; ++i)
console.debug(files[i].webkitRelativePath);
}
检索路径是这么简单!
这是一个工作示例:
这是最基本的版本,将显示已提交的列表。
fiddle是更复杂的比上面的代码让它不显示控制台什么的 。
上传到服务器！
事情开始变得稍微复杂，当我们上传这些到服务器时。
我已经能够找到在撰写本文时,HTTP请求不支持上传时的变换文件路径。这可以很容易地通过我们自己添加它到请求数据解决。
function uploadFiles(files){
// Create a new HTTP requests, Form data item (data we will send to the server) and an empty string for the file paths.
xhr = new XMLHttpRequest();
data = new FormData();
paths = "";
// Set how to handle the response text from the server
xhr.onreadystatechange = function(ev){
console.debug(xhr.responseText);
};
// Loop through the file list
for (var i in files){
// Append the current file path to the paths variable (delimited by tripple hash signs - ###)
paths += files[i].webkitRelativePath+"###";
// Append current file to our FormData with the index of i
data.append(i, files[i]);
};
// Append the paths variable to our FormData to be sent to the server
// Currently, As far as I know, HTTP requests do not natively carry the path data
// So we must add it to the request manually.
data.append('paths', paths);
// Open and send HHTP requests to upload.php
xhr.open('POST', "upload.php", true);
xhr.send(this.data);
}
This will simply create a triple hash delimited string which we will split into an array of file paths on the server which will correspond to our array of files。
这将创建一个三重散列分隔的字符串,我们将分成数组服务器上的文件路径将对应于我们的一系列文件。
0)
$fileUploader = new FileUploader($_FILES);
class FileUploader{
public function __construct($uploads,$uploadDir='uploads/'){
// Split the string containing the list of file paths into an array
$paths = explode("###",rtrim($_POST['paths'],"###"));
// Loop through files sent
foreach($uploads as $key => $current)
{
// Stores full destination path of file on server
$this->uploadFile=$uploadDir.rtrim($paths[$key],"/.");
// Stores containing folder path to check if dir later
$this->folder = substr($this->uploadFile,0,strrpos($this->uploadFile,"/"));
// Check whether the current entity is an actual file or a folder (With a . for a name)
if(strlen($current['name'])!=1)
// Upload current file
if($this->upload($current,$this->uploadFile))
echo "The file ".$paths[$key]." has been uploadedn";
else
echo "Error";
}
}
private function upload($current,$uploadFile){
// Checks whether the current file's containing folder exists, if not, it will create it.
if(!is_dir($this->folder)){
mkdir($this->folder,0700,true);
}
// Moves current file to upload destination
if(move_uploaded_file($current['tmp_name'],$uploadFile))
return true;
else
return false;
}
}
?>
进展
这绝不是完美的,这是我一直在玩,并分享我的发现。我将会更新这篇文章当我有更多要发的东西。或者如果有特别令人兴奋的东西,我甚至可能发一篇新文章。
所以现在，到这里下载源码 Folder-Upload-Structure-Sapphiondotcom
原文 http://sapphion.com/2011/11/21/html5-folder-upload-with-webkitdirectory/
转载请注明地址 http://blog.p2hp.com/archives/2924
