HTML5拖拽上传文件,chrome文件夹上传

最近被安排做一个拖拽上传和文件夹上传的功能，不考虑兼容性，哈哈这个可以用HTML5实现。这里就不仔细学习HTML5，我只是想找例子，然后偷过来用，至于原理边用边学。

首先这里有一个很好的实例实现拖拽上传：http://blogs.sitepointstatic.com/examples/tech/filedrag/1/index.html

仔细看完估计原理你也会懂的。

然后是文件夹上传这里也有一个很好的实例：http://sapphion.com/2011/11/html5-folder-upload-with-webkitdirectory/ 这里文件夹上传只能在chrome11以后使用。

可是并不是那么一帆风顺，故事发生了：

文件夹上传的时候，如果文件夹内还有文件夹上面的那个例子就不能运行了，同时也不能保持目录结构。

js的方便就在于调试方便，更有利器console.log(obj).下面的内容是在仔细看了上面两个实例的基础上：

在第一个例子中有一个函数ParseFile，我在里面加了一个console.log（file），然后再chrome下面看到如下调试信息：



有了这个路径属性，我就可用在ajax中把次属性当做参数，用于保存目录结构。

Js代码


xhr.open("POST", "upload.php?fname="+file.webkitRelativePath, true);

然后upload.php添加处理函数：

Php代码


function createFolder($path) {

if (!file_exists($path)) {

createFolder(dirname($path));

mkdir($path,0777);

}

}

$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);

$fname = $_GET['fname'];

if ($fname!=''&& $fname!='undefined') {

createFolder('uploads/'.dirname($fname));

$targetfile = 'uploads/' . $fname;

}else{

$targetfile = 'uploads/'.$fn;

}

// AJAX call

if (file_put_contents($targetfile,file_get_contents('php://input'))){

echo "ok";

}else{

echo "failed";

}

于是解决了多次文件夹上传的功能。

-----------------------------------------------

代码依次是：实例1（拖拽上传），实例2（文件夹上传），修改后的多层文件夹上传（细节请包容）,

体验HTML5的魅力请参考：http://html5-demos.appspot.com/

http://html5-demos.appspot.com/static/html5storage/demos/upload_directory/index.html

最新代码请查看 https://github.com/xiaoshenge/html5demo

http://html5file.sinaapp.com/(效果演示，由于sae有上传限制)

filedrag3.zip (4.6 KB)
下载次数: 119

webkitdirectory-folder-upload.zip (1.5 KB)
下载次数: 133

file_V0.1.zip (62.8 KB)
下载次数: 118

查看图片附件

原文链接：http://xiaoshenge.iteye.com/blog/1420313

原文链接的评论有最新的demo地址