欢迎加入
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
原AttachmentSimple组件,功能比较固定,支持单个、多个文件同时上传;上传方式,前端产生文件的UUID,提交到后端,后端根据前端的UUID保存文件;先上传文件,再下载显示;
修改:支持服务端生成唯一编码,保存文件;然后,前端根据唯一编码下载图片;
修改内容:
1 attachmentSimple.js
initUploader:function(){
var self = this;
var actionUrl = require.toUrl(this.actionUrl);
self.uploader = new Uploader(self.$domNode.find('.x-item-upload'),{
actionUrl:actionUrl,
compress: this.compress,
accept:this.accept
});
self.uploader.retCode = ''; // TODO: 增加retCode字段 2017-02-09
getFileUrl : function(realFileName,storeFileName,ownerID,operateType){
var url = new justep.URL(this.actionUrl);
url.setParam('storeFileName',storeFileName);
url.setParam('ownerID',ownerID);
url.setParam('realFileName',realFileName);
url.setParam('operateType',operateType);
url.setParam('retCode', ((this.uploader.retCode) ? this.uploader.retCode: '')); // TODO: 增加retCode字段参数 2017-02-09
return require.toUrl(url.toString());
},
addItem : function(realFileName,storeFileName,ownerID){
var items = this.getItems();
items.push({
storeFileName :storeFileName,
realFileName : realFileName,
retCode: (this.uploader.retCode) ? this.uploader.retCode: '' // TODO: 增加retCode字段 2017-02-09
});
this.bindData.setValueByID(this.bindRelation,JSON.stringify(items),ownerID);
},
2 调用的地方,这段代码要具体看情况;可以参考!
// 自定义attachmentSimple1
Model.prototype.reInitAttachmentSimple = function(attachment) {
var self = this;
// 自定义图片显示路径
attachment.previewPicture = function($object){
//console.log("attachment.previewPicture");
var url = $object.retCode.get();
if(url){
return "url('"+url+"')";
}
};
// 自定义图片下载路径
attachment.downloadFile = function(realFileName,storeFileName,ownerID){
//console.log("attachment.downloadFile");
var val = attachment.bindData.getValueByID('att', ownerID);
var data = [];
if(val) {
try {
data = JSON.parse(val);
} catch(e) {
if(console){
console.log("绑定的数据解析失败[value:"+val+"]",e);
}
data =[];
}
$.each(data, function(index, obj) {
if (obj.storeFileName == storeFileName) {
var fileApi = require("$UI/system/components/justep/docCommon/fileApi");
var url = obj.retCode;
url && fileApi.browse(url);
return false;
}
});
}
};
// 增加删除文件事件
attachment.removeItemByStoreID = function(storeFileName, ownerID){
var items = attachment.getItems(ownerID);
var delItem = null;
if(items) {
for(var i =0; i
if(items.storeFileName == storeFileName){
delItem = items.splice(i,1);
break;
}
}
}
attachment.bindData.setValueByID(attachment.bindRelation, JSON.stringify(items), ownerID);
// -- 判断是否达到图片上限 -- //
var attVal = attachment.bindData.getValue("att");
if (attVal && $.parseJSON(attVal).length < 5) {
$('.x-item-upload.x-upload-hide').removeClass('x-upload-hide'); // 显示上传
}
}
};
Model.prototype.modelLoad = function(event){
var data = this.comp("fileData");//attachmentSimple所绑定的data组件对象
var attachmentSimple1 = this.comp("attachmentSimple1");
var uploader = attachmentSimple1.uploader;
// 自定义attachmentSimple1
this.reInitAttachmentSimple(attachmentSimple1);
//设置uploader中的multiple属性值,可以上传多张图片
$(uploader.inputElement).attr('multiple', 'multiple');
// 设置服务端URL
var serverUrl = project.toServerUrl('app/upload-file/uploadPptp.jsonx');
this.comp("attachmentSimple1").actionUrl = serverUrl;
uploader.actionUrl = serverUrl;
//判断只要特定的文件类型可以上传
uploader.on('onFileSelected',function(event){
var fileType = event.file.type;
//自己判断fileType,如果不符合条件用cancel为true终止选择文件
if(fileType != "image/jpeg" && fileType != "image/png" && fileType != "image/gif"){
event.cancel = true;
project.;
}
//限制大小
$.each(event.files, function(i, file) {
if (file.size > 10485760) {// 10M
project.;
event.cancel = true;
return;
}
});
//限制文件个数
var preNum = $.parseJSON(data.getValue("att")).length; // 默认给att赋值“[]”
var curNum = event.files.length;
if (preNum + curNum > 5) {
project.;
event.cancel = true;
return;
}
});
uploader.un('onSuccess');
uploader.on('onSuccess', function(event){
var statusCode = event.response.statusCode;
var message = event.response.message;
if (statusCode == '200') {
uploader.retCode = message;
// -- 执行原始组件的onSuccess回调方法 -- //
attachmentSimple1.$domNode.find('.x-doc-process-bar').hide().css('width','0%');
var _data = {
source: attachmentSimple1,
data:event.data,
fileName:event.data.fileName
};
attachmentSimple1.fireEvent('onSuccess',_data);
attachmentSimple1.changeState("upload");
attachmentSimple1.addItem(_data.data.fileName,_data.data.storeFileName,_data.data.ownerID);
// -- 判断是否达到图片上限 -- //
var attVal = data.getValue("att");
if (attVal && $.parseJSON(attVal).length >= 5) {
$('.x-item-upload').addClass('x-upload-hide');//隐藏上传
}
} else {
project.;
// 重置进度条
attachmentSimple1.$domNode.find('.x-doc-process-bar').hide().css('width','0%');
}
});
};
3 缩略图图片样式
加样式:background-repeat: no-repeat;background-position: center center;
另外,WeX5源代码调试,可以对默认压缩版*.min.js先改名,然后重新编译UI资源;这样编译的UI资源是使用源码的,可以调试;找不到*.min.js就会直接使用组件的源码进行编译打包; |
|