PHP & HTML5 文件夹上传

拖拽上传文件夹到一个web应用程序。所以上传多个文件是一个有趣的了不起的进步。

但是现在我提供给你 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 代码

会员.jpg
很简单，对吗?

确实啊!上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