上传组件
webuploader是百度开源的一款上传组件，快速开发平台根据项目需求对此组件进行了二次开发，现处于轻度包装阶段。更多API及实例请 参考这里组件集成了amd规范，在requirejs里调用执行
组件集成了amd规范，在requirejs里调用执行
webuploader 示例代码
html:
<div id="uploader"></div><span class="orange">请上传小于50M的文件</span>
<div id="uploader2"></div><span class="orange">请上传小于50M的文件</span>
<div class="input-group uploadS">
<input class="form-control required" id="txt-uploadFlie-1" type="text" name="realName" value="" placeholder="" readonly="readonly" />
<span class="input-group-btn"><button id="btn-upload-1" class="btn btn-default btn-upload" type="button">点击上传</button></span>
</div>
js:
define(['myupload'],function () {
var back = {
upload : function () {
window.console && console.log('upload doing');
//上传方式1
var kupload = $("#uploader").powerWebUpload({
auto: false,//手动点击上传按钮上传
fileNumLimit:2,//运行上传文件个数
upOpt :{
server : '/knowledge/upload.jhtml',//上传请求地址
deleteServer :'/knowledge/deleteFile.jhtml',//删除请求地址
// fileSingleSizeLimit : 50,//默认限制文件大小50M
accept :{//接收类型限制
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'//限制文件类型用mimeTypes
}
}
,beforeUpload : function (file) {//上传之前事件
kupload.options.formData={//添加上传数据
dept : $('#dept').val()
}
window.console && console.log(kupload.options.formData);
return $hook.validate().form();//返回表单验证状态，未通过验证不提交上传事件
}
,uploadSuccess : function (file,response) {//上传成功事件
window.console && console.log(file,response);
},
uploadFinished : function () {//上传完成事件(无论是否成功)
if ($('.uploader-list').find('.item').length) {//上传直接提交表单，关闭pop弹窗
window.console && console.log('upload finished');
$util.closePop({refreshGrid:true});//关掉当前pop
};
}
});
//上传方式2
var fsInfo = {
name : [],
path : [],
fileNameUUID : [],
size : []
};
var kupload2 =$("#uploader2").powerWebUpload({
auto: true,//自动上传
fileNumLimit:2,
upOpt :{
server : ctx+'/workItemInfo/upload.jhtml',//上传请求地址
deleteServer :ctx+'/workItemInfo/deleteFile.jhtml'//删除请求地址
}
,beforeUpload : function (file) {
kupload2.options.formData={//添加上传数据
itemId : $('#itemId').val()
}
}
,uploadSuccess : function (file,req) {
window.console && console.log(file,req);
fsInfo.name.push(req.fileName);
fsInfo.path.push(req.filePath);
fsInfo.size.push(req.fileSize);
fsInfo.fileNameUUID.push(req.fileNameUUID);
$('#fileNames').val(fsInfo.name.join(','));
$('#filePaths').val(fsInfo.path.join(','));
$('#fileSizes').val(fsInfo.size.join(','));
$('#fileNameUUID').val(fsInfo.fileNameUUID.join(','));//将上传成功返回的数据信息组合成字符串放入输入框
},
uploadDelSuccess : function(fileKey,file) {//删除成功后
var arrPos = $.inArray(fileKey,fsInfo.path);
fsInfo.name.splice(arrPos,1);
fsInfo.path.splice(arrPos,1);
fsInfo.size.splice(arrPos,1);
fsInfo.fileNameUUID.splice(arrPos,1);
window.console && console.log(arrPos);
$('#fileNames').val(fsInfo.name.join(','));
$('#filePaths').val(fsInfo.path.join(','));
$('#fileSizes').val(fsInfo.size.join(','));
$('#fileNameUUID').val(fsInfo.fileNameUUID.join(','));//从已有上传数据信息里去掉删除成功的数据信息
},
uploadFinished : function () {
window.console && console.log('upload finished');
//$util.closePop({refreshGrid:true});//关掉当前pop
}
});
//上传方式3
var kupload3 = $(".uploadS").powerWebUpload({
fileNumLimit:2,//文件个数
btnStyle : true,//开启按钮模式
uploadBtnId : 'btn-upload-1',//上传按钮
upOpt :{
server : '/json/upload.js'
// ,deleteServer :ctx+'/knowledge/deleteFile.jhtml'
}
,beforeUpload : function (file) {
}
,uploadSuccess : function (file,response) {
window.console && console.log(file,response);
$('#txt-uploadFlie-1').val(response.fileUrl);//将上传后的路径信息赋值
},
uploadFinished : function () {
}
});
}
};
return back;
});