分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

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

发布时间:2023-09-06 01:41责任编辑:赖小花关键词:组件

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

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

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved