最近被安排做一个拖拽上传和文件夹上传的功能,不考虑兼容性,哈哈这个可以用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中把次属性当做参数,用于保存目录结构。
xhr.open("POST", "upload.php?fname="+file.webkitRelativePath, true);
然后upload.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有上传限制)
- 大小: 15.2 KB
分享到:
相关推荐
html5文件夹上传,实现文件夹拖拽上传
html5拖拽上传文件,html5新特性,支持外部拖拽文件
文件(文件夹)拖动排序补丁,亲测好用,好工具
html5 boostrap可拖动批量文件上传插件效果html5 boostrap可拖动批量文件上传插件效果
这是一个基于Spring MVC和HTML5的多文件上传的实例,前端实现全部采用JavaScript完成,有进度条显示,同时有上传状态。后台由一个文件上传的Controller控制,非常方便。对不想使用插件上传的人,可以看看这个参考。
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
拖拽批量上传文件夹 该组件基于 Vue.js 实现,UI 框架是 elementUI,完整的 demo 地址在... 上传文件时跨域携带 cookie 文件夹分片 三、解决过程 1. 拖拽读取每个文件夹下面的文件路
java模拟资源管理器,实现文件图标化展示,实现文件的打开,删除,上传,下载等功能。html5实现文件拖拽上传,将文件通过拖拽到浏览器的方式上传到服务器。。。。。
一个文件上传Vue2插件,可以拖动文件或在对话框中选择要上传的文件
使用webupload实现了在C# .net项目中的断点续传演示(绝对不亏的,现在.net中webupload服务端好多都不完整,我这个是自己写完用到项目中的,比较稳定,虽然代码比较初级,后面也... (5)upload文件夹是默认的上传文件夹
html5拖拽上传文件
jq+layui 实现图片拖拽上传功能
MVC5异步批量支持拖拽上传文件示例MVC5异步批量支持拖拽上传文件示例MVC5异步批量支持拖拽上传文件示例
java实现拖拽式文件上传,可以直接导入myeclipse运行。
支持文件拖拽上传,直接将文件拖拽到页面元素上方即可自动上传(默认元素是body);服务端采用asp.net 4.0程序开发,包含有处理程序,提供程序和视图控件,当然也可以用java或者php实现服务端程序。 浏览器兼容:IE10...
此文档主要如何实现拖拽上传,欢迎大家下载查看!
分片与并发结合 将一个大文件分割成多块 并发上传 极大地提高大文件的上传速度 当网络问题导致传输错误时 只需要重传出错分片 而不是整个文件 另外分片传输能够更加实时的跟踪上传进度 预览 压缩 支持常用图片...
dropzone.js 实现拖拽上传文件例子,包含Js、CSS
拖动上传 拖动目录 同时上传多个文件 html4(IE 9) PUT方法 自定义过滤器 缩图 块上传 例 安装 npm install vue-upload-component --save Vue3 npm install vue-upload-component@next --save 文献资料 ...
文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传。给用户体验带来很大问题。html5开始支持拖拽上传的需要的api。nodejs也是一个最近越来越流行的...