当前位置:首页 » 文件管理 » 图片拖拽上传

图片拖拽上传

发布时间: 2023-02-07 13:20:54

1. WEB页面如何实现拖拽文件夹上传

目前用户要通过Web上传一个文件是通过 <input type="file /"> 这个标记。具体过程需要在一个很傻的对话框里定位文件夹 -> 在大量的文件里找到目标文件 -> 确定 -> 点“上传”按钮。我们能不能把这个步骤简化,实现拖拽上传呢?

比如说,
1. 在 资源管理器 里选择一个图片
2. 拖拽到一个网页,比如说一个正在编辑的博客
3. 后台AJXJ自动上传这个图片
4. 在正在编辑的博客的当前位置直接插入并显示图片。

我想用javascript实现。(跟AJAX一样,有一点hack的味道。)

原理很简单。首先用户拖拽一个图片到浏览器,浏览器会自动跳转到这个图片。比如说我拖拽 D:\test\1.jpg 到浏览器,浏览器会跳转当前页面到 file:///D:/test/1.jpg。那么我们要做的就是在浏览器跳转之前:

1. 截获body.onunload事件,并取消浏览器的跳转
2. 获知浏览器将要跳转到的页面
3. 自动填写 <input type="file" />的地址
4. AJAX后台上传图片
5. 把图片插入当前的正在编辑位置。

发这个帖子的目的,想跟大家探讨这个设想的可能性。最后希望得出一个结论:可行,还是不可行。如果可行的话我希望深入探讨出一个固定的模式。(像AJAX那样)

2. 我想在ivx里做个文件分享系统,怎么实现拖拽上传文件功能

实现拖拽上传文件功能不用写代码的,有现成的组件可以用,用法不难。下面说一下步骤:

  1. 添加拖拽放置容器

    总结
    需要注意的是拖拽放置容器只是将文件拖拽到了容器内部,具体上传到服务器还是要通过文件接口组件的,他只是提供了一种操作模式。另外在细节上,可以在拖拽进入事件下改变容器的背景颜色,然后拖拽离开时再将背景颜色重置为初始状态。这样用户将文件拖进容器区域内会有一个明显的展示效果的变化,用户体验也会更好一些。

热点内容
java返回this 发布:2025-10-20 08:28:16 浏览:712
制作脚本网站 发布:2025-10-20 08:17:34 浏览:974
python中的init方法 发布:2025-10-20 08:17:33 浏览:686
图案密码什么意思 发布:2025-10-20 08:16:56 浏览:837
怎么清理微信视频缓存 发布:2025-10-20 08:12:37 浏览:743
c语言编译器怎么看执行过程 发布:2025-10-20 08:00:32 浏览:1085
邮箱如何填写发信服务器 发布:2025-10-20 07:45:27 浏览:314
shell脚本入门案例 发布:2025-10-20 07:44:45 浏览:194
怎么上传照片浏览上传 发布:2025-10-20 07:44:03 浏览:882
python股票数据获取 发布:2025-10-20 07:39:44 浏览:840