webuploader

文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); this.root.put("f_id", ""); this.root.put("f_nameLoc", "根目录"); this.root.put("f_pid", ""); this.root.put("f_pidRoot", ""); } /** * 将JSONArray转换成map * @param folders * @return */ public Map<String, JSONObject> toDic(JSONArray folders) { Map<String, JSONObject> dt = new HashMap<String, JSONObject>(); for(int i = 0 , l = folders.size();i<l;++i) { JSONObject o = folders.getJSONObject(i); String id = o.getString("f_id"); dt.put(id, o); } return dt; } public Map<String, JSONObject> foldersToDic

1.简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。 采用大文件分片并发上传，极大的提高了文件上传效率。 a.分片、并发 分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。 当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。 b.预览、压缩 支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。 解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。 c.多途径添加文件 支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。 粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。 d.HTML5 & FLASH 兼容主流浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。

本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案。见文章：WEB版一次选择多个文件进行批量上传(swfupload)的解决方案。 本人在2013年时使用plupload为核心进行文件的批量上传的解决方案。见文章：WEB版一次选择多个文件进行批量上传(Plupload)的解决方案 最近在学习百度的开源上传组件WebUploader，写了一些示例以记录。WebUploader的缺点是没有一个比较好的现成的界面，这个界面需要自己去实现。自由度高了一些。 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。浏览器支持ie6,ie7,ie8,ie9,ie10,ie11,firefox,chrome,edge。支持全平台操作系统：Windows,Mac,Linux支持文件夹上传下载，文件批量上传下载，层级目录保存。 关于WebUploader的功能说明： 大文件上传续传 支持超大文件上传(100G+)和续传，可以关闭浏览器，重启系统后仍然继续上传。 开源 提供ASP.NET,JSP

webuploader与django进行断点续传 需要实现的效果如下 需要使用的 js jquery.js webuploader.hs hashmap.js 路由 from django.urls import path from . import views urlpatterns = [ path('index/',views.index), path('checkChunk/',views.checkChunk,name='checkChunk'), path('mergeChunks/',views.mergeChunks,name='mergeChunks'), path('upload/',views.upload,name='upload'), ] 视图 from django.shortcuts import render from django.http import JsonResponse import os def index(request): return render(request,'upload.html') # 检查上传分片是否重复，如果重复则不提交，否则提交 def checkChunk(request): # post请求 if request.method == 'POST': # 获得上传文件块的大小,如果为0，就告诉他不要上传了

在Web应用系统开发中，文件上传和下载功能是非常常用的功能，今天来讲一下JavaWeb中的文件上传和下载功能的实现。 先说下要求： PC 端全平台支持，要求支持Windows,Mac,Linux 支持所有浏览器。 支持文件批量上传 支持文件夹上传，且要求在服务端保留层级结构。文件夹数量要求支持到10W。 支持大文件断点续传，要求刷新浏览器，重启浏览器，重启电脑后仍然能够继续上传。文件大小要求能够支持到50个G。 支持自动加载本地文件，要求能够自动加载指定的本地文件。 支持文件批量下载，要求不要在服务器打包。因为50G的文件在服务器打包时间比较长。 支持文件夹下载，要求不要在服务器打包，下载到本地后要求保留层级结构 文件列表面板支持路径导航，新建文件夹 对于文件上传，浏览器在上传的过程中是将文件以流的形式提交到服务器端的，如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦，所以一般选择采用apache的开源工具common-fileupload这个文件上传组件。这个common-fileupload上传组件的jar包可以去apache官网上面下载，也可以在struts的lib文件夹下面找到，struts上传的功能就是基于这个实现的。common-fileupload是依赖于common-io这个包的，所以还需要下载这个包。 一、开发环境搭建

上一篇说了webuploader图片上传，这篇说回显,读取数据库中的图片路径并显示 回显图片的前提是拿到后台的图片上传路径， var imgs=new Array(); uploader.on('uploadSuccess', function(file, response) { imgs.push(response.data); }); response就是后台传回的json数据， 读取数据库中的图片路径并显示的解决方法是用layer打开多一个窗口 function picture_add(title,url){ var index = layer.open({ type: 2, title: title, area: ['700px', '530px'], fix: false, //不固定 maxmin: true, content: url }); } function uploadCallback(imgs){ $.each(imgs,function(index,value){ $(".callback_img").attr('src',value); $('#callback_img').val(value) // var dom = "<img with='100' height='100' src='\\"+value+"'/>" // $(".select

排名不分先后 1.ASP.NET快速开发框架 1.OSharpNS 简介:轻量级.net core快速开发框架发布 官网: https://www.osharp.org 博客: https://www.cnblogs.com/guomingfeng/p/osharpns-publish.html GitHub: https://github.com/i66soft/osharp-ns20 2.DDit 简介:.NET 企业管理系统快速搭建框架 官网:无 博客: http://www.cnblogs.com/whywhy898/p/6889132.html GitHub: https://github.com/whywhy898/DDit-Rapid-Development-Framework 3.Coldairarrow 简介: 本框架旨在为.NET开发人员提供一个Web后台快速开发框架，采用本框架，能够极大的提高项目开发效率。 整个框架包括三个版本： .NET新版，采用.NET452,GitHub地址为： https://github.com/Coldairarrow/Coldairarrow.Fx.Net.Easyui.GitHub .NET40版，采用.NET40,GitHub地址为： https://github.com/Coldairarrow/Coldairarrow

使用summernote做为富文本编辑器的原因是因为轻量，自己做summernote的插件也容易。summernote自带的图片上传功能我不喜欢，想自己做一个图片上传的插件，最终选择了webuploader做为基础上传组件。 先来看看summernote自带的图片上传功能，实在是太简单了。 集成webuploader到summernote里的图片上传功能插件如下图。 显示打勾图标，说明已经成功上传图片到服务器了。 webuploader在summernote里的使用代码如下。 以上webuploader 上传功能在summernote富文本编辑器的用法，下面再改造一下webuploader官方的demo例子，封装成一个单独的jquery插件来使用。 使用代码如下 这里特制了 usePaste 和 images 参数， usePaste 代表要不要开启webuploader的截图粘贴功能，因为一个页面上有多个webuploader实例时，粘贴截图会导致所有实例都能获取到粘贴的图片，如果有多个webuploader实例存在就干脆禁用截图功能。 而 images 参数就是我们做编辑功能的时候，要初始化webuploader的实例，webuploader官方的demo是不带有这样的功能，所以要自己改造。 本文章由开源中国作者【墨鱼码】原创发布，未经允许不得转载。

核心原理： 该项目核心就是文件分块上传。前后端要高度配合，需要双方约定好一些数据，才能完成大文件分块，我们在项目中要重点解决的以下问题。 * 如何分片； * 如何合成一个文件； * 中断了从哪个分片开始。 如何分，利用强大的js库，来减轻我们的工作，市场上已经能有关于大文件分块的轮子，虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系，我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。 如何合，在合之前，我们还得先解决一个问题，我们如何区分分块所属那个文件的。刚开始的时候，我是采用了前端生成了唯一uuid来做文件的标志，在每个分片请求上带上。不过后来在做秒传的时候我放弃了，采用了Md5来维护分块和文件关系。 在服务端合并文件，和记录分块的问题，在这方面其实行业已经给了很好的解决方案了。参考迅雷，你会发现，每次下载中的时候，都会有两个文件，一个文件主体，另外一个就是文件临时文件，临时文件存储着每个分块对应字节位的状态。 这些都是需要前后端密切联系才能做好，前端需要根据固定大小对文件进行分片，并且请求中要带上分片序号和大小。前端发送请求顺利到达后台后，服务器只需要按照请求数据中给的分片序号和每片分块大小（分片大小是固定且一样的）算出开始位置，与读取到的文件片段数据，写入文件即可。 为了便于开发，我 将服务端的业务逻辑进行了如下划分，分成初始化

引入资源 使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。 <!--引入CSS--> <link rel= "stylesheet" type= "text/css" href= "webuploader文件夹/webuploader.css" > <!--引入JS--> <script type= "text/javascript" src= "webuploader文件夹/webuploader.js" ></script> <!--SWF在初始化的时候指定，在后面将展示--> 文件上传 WebUploader只包含文件上传的底层实现，不包括UI部分。所以交互方面可以自由发挥，以下将演示如何去实现一个简单的版本。 请点击下面的选择文件按钮，然后点击开始上传体验此Demo。 Html部分 首先准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。 <div id= "uploader" class= "wu-example" > <!--用来存放文件信息--> <div id= "thelist" class= "uploader-list" ></div> <div class= "btns" > <div id= "picker" > 选择文件 </div> <button id= "ctlBtn" class= "btn btn