分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
1.2 预览、压缩
支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。
解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。
1.3 多途径添加文件
支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。
粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。
1.4 HTML5 &FLASH
兼容主流浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。
同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。
1.5 MD5秒传
当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。
如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。
1.6 易扩展、可拆分
采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。
采用AMD规范组织代码，清晰明了，方便高级玩家扩展。
2、引入资源
2.1 下载包内容
├── Uploader.swf // SWF文件，当使用Flash运行时需要引入。
├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本
├── webuploader.flashonly.js // 只有Flash实现的版本。
├── webuploader.flashonly.min.js // min版本
├── webuploader.html5only.js // 只有Html5实现的版本。
├── webuploader.html5only.min.js // min版本
├── webuploader.withoutimage.js // 去除图片处理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本
2.2 或者直接使用由staticfile提供的cdn版本，或者下载Git项目包。
// SWF文件，当使用Flash运行时需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf
// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js
// 只有Flash实现的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js
// 只有Html5实现的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js
// 去除图片处理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js
2.3 DIY打包
WebUploader文件打包借助了Grunt工具来实现
2.3.1 环境依赖
1.git命令行工具
2.node &npm命令行工具
3.grunt (npm install grunt-cli -g)
2.3.2 编译代码
1.克隆 webuploader git仓库，git clone https://github.com/fex-team/webuploader.git。
2.安装node依赖，npm install。
3.执行grunt dist，此动作会在dist目录下面创建合并版本的js, 包括通过uglify压缩的min版本。
2.3.3 配置
打开webuploader仓库根目录下面的Gruntfile.js文件, 代码合并有buildtask来完成。找到build配置项。
Gruntfile.js已经配置了一个自定义合并的demo. 打包只支持HTML5的版本
// 自己配置的实例
// glob语法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}
3、angular指令——<web-uploader>
3.1 指令功能
添加一个上传文件按钮，可以自行配置上传文件的类型和过滤规则，且在d出的模态框中进行 *** 作，支持连续上传，分类选择上传
3.2 使用说明
这里只是使用说明，可能会加一些注意事项，具体参数或者变量说明请参看后面
3.2.1 页面添加一个指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>
3.2.2 配置上传类型和过滤规则
上传类型
type有四种类型，分别为
image：图片
video：音视频
flash：flash
file：办公文档，压缩文件等等
过滤规则
accept有四个对象属性，属性中包含标题、允许文件后缀、允许的mimetype
3.2.3 指令中绑定d出模态框的事件
web-uploader这个指令中其实只做了一件事，给元素本身绑定d出模态框的事件，具体上传文件是在模态框中完成的
3.2.4 初始化uploader类，配置相关属性
在模态框控制器中用到了$timeout
$timeout(function(){
//这里是上传配置代码
},0)
因为配置uploader时需要事先准备好dom元素，angular打开模态框是异步而JavaScript是单线程，所以实际上在执行模态框控制器中的代码时，模态框并没有打开，也就是dom并没有加载完成，这会导致WebUploader报a.runningtime is not a function...的错误
3.3 指令详细说明
3.3.1 父级controller中的配置
.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允许上传的类型 图片/音视频/flash/文件
$scope.accept = {
//图片
image: {
title : 'Images',//标题
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允许上传文件的后缀
mimeTypes : 'image/*'//允许的mimetype
},
//音视频
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//办公文档，压缩文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
}
}])
3.3.2 指令web-uploader
.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){
$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
}
}
}
})
modalInstance.result.then(function(returnStatus){
console.log(returnStatus)
},function(){
console.log('Modal dismissed at: ' + new Date())
})
})
}
}
}])
html multi select控件提交form：一、multiselect 是一个开源插件，官网地址https://github.com/ehynds/jquery-ui-multiselect-widget， 相关文档地址http://www.erichynds.com/blog/jquery-ui-multiselect-widget（打不开） ，看了下代码的提交时间，2年到5年前提交的，最近无更新。项目中有用到下拉选择框多选的情况，就研究了下使用方法，detail is below:
二、首先下载https://github.com/ehynds/jquery-ui-multiselect-widget/archive/master.zip 解决后放到项目里，主要引用到的js和css有：
<script type="text/javascript" th:src="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery.js}"></script>
<script type="text/javascript" th:src="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery-ui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery.multiselect.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/static/js/core/jquery-ui-multiselect-widget-master/jquery.multiselect.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery-ui.css}" />
下载下来的压缩包里提借的示例 引用的 jquery-ui是google的公共库，国内调不了，所以打开很慢直到超时，自己另外下个jquery-ui改成引用本地的。
用法很简单：
$("#RECEIVE_GOODS").multiselect(
{
close: function(){//获取选中的值，在下拉框关闭时触发的
var value = $("#RECEIVE_GOODS").multiselect("getChecked").map(function(){
return this.value
}).get()
$("#RECEIVE_GOODS").val(value)
},
open: function(){//打开 选中初始化，不是很完美，是在点下后处理的，不能在初始化是显示选中的条数
var vv = document.getElementById("RECEIVE_GOODS").attributes[0].nodeValue//$("#RECEIVE_GOODS").val()
var chks = $("#RECEIVE_GOODS").multiselect("getChecks")
if(null != chks &&undefined != chks &&chks.length >0){
for(var i = 0i <chks.lengthi++){
var ck = chks[i]
if(null != vv && undefined != vv &&"" != vv){
var vvs = vv.split(",")
for(var j = 0j <vvs.lengthj++){
if($.trim(ck.value) == $.trim(vvs[j])){
ck.checked = true
}
}
}
}
}
}
}
三、其它支持的一些相关事件和回调方法
Parameter
Description
Default
showHeaderA boolean value denoting whether or not to display the header containing the check all, uncheck all, and close links.true
maxHeightThe maximum height in pixels of the scrolling container that holds the checkboxes.175
minWidthThe minimum width in pixels of widget. Setting to auto (default) will inherit the width from the original select element.200
checkAllTextThe default text of the “Check all” link.Check all
unCheckAllTextThe default text of the “Uncheck all” link.Uncheck all
noneSelectedText
Renamed from noneSelected in 0.5!
The default text the select box when no options have been selected.
Select options
selectedListA boolean/numeric value denoting whether or not to display the checked opens in a list, and how many. A number greater than 0 denotes the maximum number of list items to display before switching over to the selectedText parameter. A value of 0 or false is disabled.false
selectedTextThe text to display in the select box when options are selected (if selectedList is false). The pound sign (#) is automatically replaced by the number of checkboxes selected. If two pound signs are present in this parameter, the second will be replaced by the total number of checkboxes available. Example: “# of # checked”.
New in 0.5!
As of 0.5, this parameter can also accept an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. See the examples.
# selected
positionThe position of the options menu relative to the input control: top, middle, or bottom.bottom
shadowA boolean value denoting whether to apply a css shadow (class ui-multiselect-shadow).false
fadeSpeedHow fast (in ms) to fade out the options menu on close.200
state
New in 0.5!
The default state of the widget. Either open or closed.
closed
disabled
New in 0.5!
Whether or not to disabled the widget by default. Important: see the “Known Issues” section below for more documentation on this.
false
onCheckA callback to fire when a checkbox is checked.Function
onOpenA callback to fire when the options menu is opened.Function
onCheckAllA callback to fire when the “Check all” link is clicked.Function
onUncheckAllA callback to fire when the “Uncheck all” link is clicked.Function
onOptgroupToggleA callback to fire when the opgroup header is clicked. An array of checkboxes inside the optgroup is passed as an optional argument.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）