PHP & HTML5 文件夹上传

博主： dafenqi
发布时间：2023 年 08 月 09 日
93 次浏览
暂无评论
5008字数
分类： php 教程

# [PHP & HTML5 文件夹上传](https://blog.p2hp.com/archives/2924)

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

但是现在我提供给你 [webkitdirectory](http://sapphion.com/2011/11/21/html5-folder-upload-with-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](http://blog.p2hp.com/wp-content/uploads/2016/03/Folder-Upload-Structure-Sapphiondotcom.zip)

最后修改：2023 年 08 月 09 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

zodhzrusdp
《遥遥乡愁》剧情片高清在线免费观看：https://www.j...
jprfffedhg
你的才华让人瞩目，期待你的更多文章。 https://w...
pkrqcpalxw
你的文章让我感受到了无尽的欢乐，谢谢分享。 http:/...
urjitfqbzy
你的文章让我感受到了生活的美好，谢谢！ https://...
bfgsfrpbas
你的文章让我心情愉悦，每天都要来看一看。 https:/...

PHP & HTML5 文件夹上传

dafenqi • 2023 年 08 月 09 日

# [PHP & HTML5 文件夹上传](https://blog.p2hp.com/archives/2924)

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

但是现在我提供给你 [webkitdirectory](http://sapphion.com/2011/11/21/html5-folder-upload-with-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);
}

public function upload($current,$uploadFile){
		if(move_uploaded_file($current->tmp_name,$uploadFile)){
		return true;
		}
	}
}

function get_file_extension($file_name)
{
  return substr(strrchr($file_name,'.'),1);
}
我也一直在准备做MooTools脚本异步上传文件。所以请继续关注。

我很高兴听到任何意见或建议。

好运。

更新：

上传时保持目录结构 ：

在上传时是有可能保持文件夹的结构的。在写作时，我一直无法找到一个等价的不使用webkit的浏览器。

这篇文章仅供测试！

我正在写一个完整的AJAX文件夹上传脚本，但是我做时，我会去发一些我发现有趣的小代码片段。

因此,闲话少说,上代码:

这是一个工作示例:
这是最基本的版本,将显示已提交的列表。
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);
	};

这将创建一个三重散列分隔的字符串,我们将分成数组服务器上的文件路径将对应于我们的一系列文件。

0)
	$fileUploader = new FileUploader($_FILES);

所以现在，到这里下载源码  [Folder-Upload-Structure-Sapphiondotcom](http://blog.p2hp.com/wp-content/uploads/2016/03/Folder-Upload-Structure-Sapphiondotcom.zip)

PHP & HTML5 文件夹上传

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

PHP 数据类型

当你在浏览器扣下域名时。。。

PHP switch 替代品 match

变量在内存中的表现形式

简易发邮件

6个Linux进程管理命令

PHP-FPM性能优化实例：提高网站图片加载速度的方法

如何用 PHP 获取目录大小

环境安装相关文章

一分钟了解负载均衡的一切

PHP & HTML5 文件夹上传

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

PHP & HTML5 文件夹上传

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款