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

一、定义一个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();
    }

原文地址:https://www.cnblogs.com/404code/p/8424595.html

时间: 2024-10-30 06:06:20

Wex5的attachmentSimple组件的九图和单视频上传的相关文章

Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能

视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpeg有非常强大的功能包括视频采集功能.视频格式转换.视频抓图.给视频加水印等. ffmpeg视频采集功能非常强大,不仅可以采集视频采集卡或USB摄像头的图像,还可以进行屏幕录制,同时还支持以RTP方式将视频流传送给支持RTSP的流媒体服务器,支持直播应用. 1.能支持的格式 ffmpeg能解析的格式:

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便. 简要教程 ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便. 安装 可以通过bower或npm来安装ssi-uploader文件上传插件. b

基于nodeJs express 框架的图片上传和编辑(引用美图编辑工具)上传小示例

唉,由于近期工作中对于新知识的运用相对较少,也导致小码哥少有更新鄙人心得的机会.还望路过的基友们不要抱怨,勿喷,,,,, 本篇文章,是基于NodeJs Express框架完成的一个用于项目中图片上传和编辑上传的小示例,当然,由于项目工期不禁,都是在非工作时间慢慢完成的,导致至今该图片上传功能也未能插入项目中真正的验证最终效果.不过就小码哥感觉,基本思路及基本功能算是完成了. 下面便由小码哥来给基友们稍微讲解改功能的实现过程及其中用到的一些技术等等. 首先,说说NodeJs Express框架的搭

SpringMVC学习(九)——SpringMVC中实现文件上传

这一篇博文主要来总结下SpringMVC中实现文件上传的步骤.但这里我只讲单个文件的上传. 环境准备 SpringMVC上传文件的功能需要两个jar包的支持,如下: 工程中肯定要导入以上两个jar包,主要是CommonsMultipartResolver解析器依赖commons-fileupload和commons-io这两个jar包. 单个文件的上传 前台页面 我们要改造editItem.jsp页面,主要是在form表单中添加商品图片一栏,效果我截图如下: 注意一点的是form表单中别忘了写e

JavaScript进阶 九 JS实现本地文件上传至阿里云服务器

JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务器的操作.这次需要实现将本地打包好的文件上传至阿里云服务器.使用前面的图片文件上传方法无法完成此操作.操作界面如下: 思路 本地与服务端传输文件的格式应该是熟悉的Base64格式.首先需要将本地文件转换为Base64格式,传输至服务端后,在服务端再将Base64格式的文件转换为原始文件. 源码解析 控制器 /

yii2组件之多图上传插件FileInput的详细使用

作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 文件上传也写过几篇文章了,包括最基本的yii2文件上传.异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美. 今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便:二来嘛

jquery组件WebUploader文件上传用法详解

这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件,下文来为各位演示一下关于jquery WebUploader文件上传组件的用法. 使用WebUploader还可以批量上传文件.支持缩略图等等众多参数选项可设置,以及多个事件方法可调用,你可以随心所欲的定制你要的上传组件. 接下来我以图片上

asp 文件上传(ASPUpload组件上传)

要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload  要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件,它的下载网址是:           http://www.persits.com/aspupload.exe       组件提供者网址是:           http://www.aspupload.com        

ASP中文件上传组件ASPUpload介绍和使用方法

[导读]要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload  要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件,它的下载网址是:           http://www.persits.com/aspupload.exe       组件提供者网址是:           http://www.aspupload.com