请选择 进入手机版 | 继续访问电脑版
福玉久久 门户 查看主题

Wex5的attachmentSimple组件的九图和单视频上传

发布者: 风影 | 发布时间: 2019-1-6 21:21| 查看数: 633| 评论数: 0|帖子模式

欢迎加入

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一、定义一个cData用来充当放置图片路径信息的临时容器
1331176-20180206223706138-1742853165.png
二、在attachmentSimple组件所在的文件的onLoadModel通过Js限制文件上传的类型和数量
  1. Model.prototype.modelLoad = function(event) {
  2.         var data = this.comp("data1");
  3.         // 限制只能上传图片和视频在accept上可以设置
  4.         var uploader = this.comp("attachmentSimple2").uploader;
  5.         /*
  6.          * //设置uploader中的multiple属性值,可以上传多张图片
  7.          * $(uploader.inputElement).attr('multiple', 'multiple');
  8.          */
  9.         uploader.on('onFileSelected', function(event) {
  10.             var file = data.getValue("fileName");
  11.             var jsonList = eval("(" + file + ")");
  12.             // debugger
  13.             if (event.file.type == "" || event.file.type.indexOf("image/") == 0) {
  14.                 type = event.file.type;
  15.                 if (jsonList != undefined && jsonList.length >= 8) {
  16.                     if (jsonList.length == 8) {
  17.                         util.hint("正在上传图片", {
  18.                             "position" : "middle"
  19.                         });
  20.                         $('.x-item-upload').addClass('x-upload-hide');// 隐藏上传
  21.                     } else {
  22.                         $('.x-item-upload').addClass('x-upload-hide');// 隐藏上传
  23.                         util.hint("仅单独上传1个视频或单独上传9张图片!", {
  24.                             "type" : "warning",
  25.                             "position" : "middle"
  26.                         });
  27.                         event.cancel = true;
  28.                     }
  29.                 } else {
  30.                     util.hint("正在上传图片", {
  31.                         "position" : "middle"
  32.                     });
  33.                 }
  34.             } else if (event.file.type == "" || event.file.type.indexOf("video/") == 0) {
  35.                 type = event.file.type;
  36.                 if (jsonList != undefined && jsonList.length >= 1) {
  37.                     util.hint("仅单独上传1个视频或单独上传9张图片!", {
  38.                         "type" : "warning",
  39.                         "position" : "middle"
  40.                     });
  41.                     event.cancel = true;
  42.                 } else {
  43.                     util.hint("正在上传视频...", {
  44.                         "position" : "middle"
  45.                     });
  46.                     $('.x-item-upload').addClass('x-upload-hide');// 隐藏上传
  47.                     $('.x-item-remove').addClass('x-upload-hide');
  48.                 }
  49.             }
  50.         });
  51.     };
复制代码
三、单击组件减号时显示上传的加号按钮来控制是否能继续上传下载(在这里已经通过数量控制了,为了更加美观说着动态隐藏显示加号、减号按钮)
  1. //单击减号事件
  2.     Model.prototype.div33Click = function(event){
  3.         $('.x-item-upload').removeClass('x-upload-hide');//取消隐藏上传
  4.     };
复制代码
四、保存图片的url到数据库,图片的物理文件在单击加号、减号的时候已经通过组件上传到服务器的默认路径了(可通过修改组件源代码修改)
  1. //保存图片
  2.     Model.prototype.saveImage = function(self) {
  3.         var messageData = self.comp("messageData");
  4.         var userData = self.comp("userData1");
  5.         var data = self.comp("data1");
  6.         var imageData = self.comp("imageData");
  7.         
  8.         var messageId = messageData.getCurrentRowID();
  9.         var row = data.getCurrentRow();
  10.         var jsonList = eval("(" + row.val('fileName') + ")");
  11.         if(jsonList !=undefined){
  12.             // 1、使用 window.locaion.href 获得项目的根路径
  13.             var curWwwPath = window.document.location.href;
  14.             //2、获得主机地址之后 的目录
  15.             var pathname= window.document.location.pathname;
  16.             var pos = curWwwPath.indexOf(pathname);
  17.             //3、获得主机地址
  18.             var localhostPath = curWwwPath .substring(0,pos);
  19.             
  20.             for (i = 0; i < jsonList.length; i++) {

  21.                 jsonList[i].ownerID = row.getID();
  22.                 var ownerID = row.getID();
  23.                 var realFileName = jsonList[i]["realFileName"];
  24.                 var storeFileName = jsonList[i]["storeFileName"];
  25.                 var operateType = "preview";// 预览
  26.                 var previewUrl = self.comp("attachmentSimple2").getFileUrl(realFileName, storeFileName, ownerID, operateType);

  27.                 var Url = previewUrl;// 图片访问路径
  28.                 if(type.indexOf("image/") != -1){//上传为图片
  29.                     if (Url != null) {
  30.                         // 获取新增的消息id,存储到image表中
  31.                         imageData.newData();
  32.                         imageData.setValue("message_id", messageId);
  33.                         imageData.setValue("image_url", Url);
  34.                         //real_url = "http://120.27.11.218:8095"+imageUrl;
  35.                         var real_url = localhostPath+Url;//拼接图片的地址栏预览路径
  36.                         console.log("图片预览路径"+real_url);
  37.                         imageData.setValueByID("real_url", real_url);   
  38.                         
  39.                         imageData.saveData();
  40.                     }
  41.                 }else if(type.indexOf("video/") != -1){//上传为视频
  42.                     messageData.setValue("video_url", Url);
  43.                 }
  44.             }
  45.         }
  46.         // 刷新data防止下次上传的时候图片依然显示在界面
  47.         //imageData.refreshData();
  48.         data.refreshData();
  49.     }
复制代码

最新评论

快速回复 返回顶部 返回列表