请选择 进入手机版 | 继续访问电脑版
查看: 1085|回复: 0
收起左侧

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

[复制链接]
  • TA的每日心情
    萌哒
    2018-3-8 15:49
  • 发表于 2019-1-6 21:21:57 | 显示全部楼层 |阅读模式

    欢迎加入

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

    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.     }
    复制代码

    所谓活着的人,就是不断挑战的人,不断攀登命运峻峰的人。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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