一、定义一个cData用来充当放置图片路径信息的临时容器
二、在attachmentSimple组件所在的文件的onLoadModel通过Js限制文件上传的类型和数量
Model.prototype.modelLoad = function(event) { var data = this.comp("data1"); // 限制只能上传图片和视频在accept上可以设置 var uploader = this.comp("attachmentSimple2").uploader; /* * //设置uploader中的multiple属性值,可以上传多张图片 * $(uploader.inputElement).attr(‘multiple‘, ‘multiple‘); */ uploader.on(‘onFileSelected‘, function(event) { var file = data.getValue("fileName"); var jsonList = eval("(" + file + ")"); // debugger if (event.file.type == "" || event.file.type.indexOf("image/") == 0) { type = event.file.type; if (jsonList != undefined && jsonList.length >= 8) { if (jsonList.length == 8) { util.hint("正在上传图片", { "position" : "middle" }); $(‘.x-item-upload‘).addClass(‘x-upload-hide‘);// 隐藏上传 } else { $(‘.x-item-upload‘).addClass(‘x-upload-hide‘);// 隐藏上传 util.hint("仅单独上传1个视频或单独上传9张图片!", { "type" : "warning", "position" : "middle" }); event.cancel = true; } } else { util.hint("正在上传图片", { "position" : "middle" }); } } else if (event.file.type == "" || event.file.type.indexOf("video/") == 0) { type = event.file.type; if (jsonList != undefined && jsonList.length >= 1) { util.hint("仅单独上传1个视频或单独上传9张图片!", { "type" : "warning", "position" : "middle" }); event.cancel = true; } else { util.hint("正在上传视频...", { "position" : "middle" }); $(‘.x-item-upload‘).addClass(‘x-upload-hide‘);// 隐藏上传 $(‘.x-item-remove‘).addClass(‘x-upload-hide‘); } } }); };
三、单击组件减号时显示上传的加号按钮来控制是否能继续上传下载(在这里已经通过数量控制了,为了更加美观说着动态隐藏显示加号、减号按钮)
//单击减号事件 Model.prototype.div33Click = function(event){ $(‘.x-item-upload‘).removeClass(‘x-upload-hide‘);//取消隐藏上传 };
四、保存图片的url到数据库,图片的物理文件在单击加号、减号的时候已经通过组件上传到服务器的默认路径了(可通过修改组件源代码修改)
//保存图片 Model.prototype.saveImage = function(self) { var messageData = self.comp("messageData"); var userData = self.comp("userData1"); var data = self.comp("data1"); var imageData = self.comp("imageData"); var messageId = messageData.getCurrentRowID(); var row = data.getCurrentRow(); var jsonList = eval("(" + row.val(‘fileName‘) + ")"); if(jsonList !=undefined){ // 1、使用 window.locaion.href 获得项目的根路径 var curWwwPath = window.document.location.href; //2、获得主机地址之后 的目录 var pathname= window.document.location.pathname; var pos = curWwwPath.indexOf(pathname); //3、获得主机地址 var localhostPath = curWwwPath .substring(0,pos); for (i = 0; i < jsonList.length; i++) { jsonList[i].ownerID = row.getID(); var ownerID = row.getID(); var realFileName = jsonList[i]["realFileName"]; var storeFileName = jsonList[i]["storeFileName"]; var operateType = "preview";// 预览 var previewUrl = self.comp("attachmentSimple2").getFileUrl(realFileName, storeFileName, ownerID, operateType); var Url = previewUrl;// 图片访问路径 if(type.indexOf("image/") != -1){//上传为图片 if (Url != null) { // 获取新增的消息id,存储到image表中 imageData.newData(); imageData.setValue("message_id", messageId); imageData.setValue("image_url", Url); //real_url = "http://120.27.11.218:8095"+imageUrl; var real_url = localhostPath+Url;//拼接图片的地址栏预览路径 console.log("图片预览路径"+real_url); imageData.setValueByID("real_url", real_url); imageData.saveData(); } }else if(type.indexOf("video/") != -1){//上传为视频 messageData.setValue("video_url", Url); } } } // 刷新data防止下次上传的时候图片依然显示在界面 //imageData.refreshData(); data.refreshData(); }