webuploader

完整项目在此： https://github.com/NoonLoveSnow/bigfileupload.git 先说下为什么用数据库记录文件分片，因为文件分片可能不会存储在本机上，用数据库可以记录分片存储位置，方便获取。。合并后的文件也可以记录其md5值，作为真实文件，用户文件可以只需要新建表引用它就行了。 大文件传输主要注意的有以下几点： 大文件传输要求 ： 大文件传输往往是比较耗时的，所以要求传输操作可继续的即断点续传，不能因为一些故障导致重新上传整个文件。 断点续传思路： 在浏览器传输时需要将文件分片上传，当遇到意外情况继续上传时，则之前传输完成的分片就不用传输了而传输未上传成功的分片。 如何记录上传成功的分片： 文件MD5与分片编号作为联合主键记录在数据库中。 分片上传前如何判断分片已经传输完成： 数据库中有记录，且文件长度与分片大小（chunkSize）相等 合并后文件校验： 文件大小是否不一致，每个分片应有的大小加起来与合并后的文件相比较 关于WebUploader： 网上有很多教程和例子。。 主要代码 后端： package com.noonsnow.bigfileupload.controller; import com.alibaba.fastjson.JSONObject; import com.noonsnow.bigfileupload.mapper

< template > < div > < br / > 操作步骤： < br / > 1 、点击“选择文件”，选择要上传的文件 < br / > 2 、点击“开始上传”，开始上传文件 < br / > 3 、如需重新上传请重复上边的步骤。 < br / > < br / > < div id = "uploader" class = "wu-example" > < div class = "btns" style = "float:left;padding-right: 20px" > < div id = "picker" > 选择文件 < / div > < / div > < div id = "ctlBtn" class = "webuploader-pick" @click = "upload()" > 开始上传 < / div > < / div > < ! -- 用来存放文件信息 -- > < div id = "thelist" class = "uploader-list" > < div v - if = "uploadFile.id" : id = 'uploadFile.id' > < span > { { uploadFile . name } } < / span > & nbsp ; < span class = 'percentage' > {

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

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

全民都在python大法，也不能免俗，Flask搭个架子，图片上传+识别。 想看本地的缩略图，直接采用file的路径，由于chrome的安全限制，没办法只好用html5的FileReader，还需要配合input标签，但是，webuploader里没有input标签啊 折腾了一个小时，无果，这时候只好翻翻官方的API了。 果然在官方的demo里发现了类似的功能， http://fex.baidu.com/webuploader/demo.html 翻一翻源码， http://fex.baidu.com/webuploader/js/demo.js 找到了这个函数makeThumb 一看官方API，立马安排得明明白白。 下面贴代码，在 uploader.on('fileQueued', function(file) {} 函数里加上: var $img = $('<div></div>');uploader.makeThumb(file, function (error, src) { if (error) { return; } var img = $('<img src="' + src + '">'); $img.append(img);}, 100, 100); 这里的100是缩略图尺寸，然后把$img元素插入到你想要的地方去即可。比如我想插入到 <td class=

全民都在python大法，也不能免俗，Flask搭个架子，图片上传+识别。 想看本地的缩略图，直接采用file的路径，由于chrome的安全限制，没办法只好用html5的FileReader，还需要配合input标签，但是，webuploader里没有input标签啊 折腾了一个小时，无果，这时候只好翻翻官方的API了。 果然在官方的demo里发现了类似的功能， http://fex.baidu.com/webuploader/demo.html 翻一翻源码， http://fex.baidu.com/webuploader/js/demo.js 找到了这个函数makeThumb 一看官方API，立马安排得明明白白。 下面贴代码，在 uploader.on('fileQueued', function(file) {} 函数里加上: var $img = $('<div></div>');uploader.makeThumb(file, function (error, src) { if (error) { return; } var img = $('<img src="' + src + '">'); $img.append(img);}, 100, 100); 这里的100是缩略图尺寸，然后把$img元素插入到你想要的地方去即可。比如我想插入到 <td class=

背景：50G大文件的HTTP上传至服务器。 好了，根据这个命题，可以开始研究我们怎么做才能把这么大的文件上传成功。 分片上传是肯定的，断点续传也是要有的，进度可视化那就更好了，基于这些，我选择了Webuploader在前端进行分片上传。 为什么选择它呢，好吧，它简单，易上手，好排错，文档多...... 实际是我懒...... 网上的教程大部分是复制粘贴，借鉴起来也很无奈，推荐一个我觉得比较实在的 https://www.cnblogs.com/baiyunchen/p/5383507.html 本篇Demo地址，欢迎各位大佬指点 https://github.com/papapalh/Big_File 一：开始 新建立项目，这里用了php7.0版本后台处理。 没啥说的，下载WebUploader的包 http://fex.baidu.com/webuploader/download.html jQuery也是必须的，因为就是依赖jQ的。 好了，可以初始化我们的上传组件了，介绍一下这里Demo的配置 // 创建上传 var uploader = WebUploader.create({ swf: '/webuploader-0.1.5/Uploader.swf', server: 'index.php', // 服务端地址 pick: '#picker', //

1、首先加载 <link rel="stylesheet" type="text/css" href="~/Content/scripts/plugins/webuploader/webuploader.css"> <script type="text/javascript" src="~/Content/scripts/plugins/webuploader/webuploader.js"></script> 2、在页面中放入DIV <div id="uploader" class="wu-example"> <!--用来存放文件信息--> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="picker">选择文件</div> <input id="ctlBtn" type="button" value="开始上传" class="btn btn-default" /> </div> </div> 3、初始化 WebUploader <script> var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../"; var GUID = WebUploader

上传文件 一、自定义上传文件 1 from flask import Flask,request 2 from datetime import datetime 3 import random 4 app = Flask(__name__) 5 6 @app.route('/upload',methods=['POST']) 7 def upload(): 8 data = request.files.get('pic') 9 # 随机图片名称 10 pic=datetime.now().strftime('%Y%m%d%H%M%S')+str(random.randint(1000,9999))+'.png' 11 with open(pic,'wb') as f: 12 f.write(data.read()) 13 return '' 14 15 if __name__ == '__main__': 16 app.run(debug=True) <form action='http://127.0.0.1:5000/upload' method='post' enctype="multipart/form-data"> <input type='file' name='pic' /> <input type='submit' value='submit' /> </form>

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