直播app开发搭建,动态广场内,图片上传到软件

直播app开发搭建,动态广场内,图片上传到软件

 

1
move = {<br>imgSrc: [], //图片路径<br>imgFile: [], //文件流<br>imgName: [], //图片名字<br>//选择图片<br>// 函数闭包,让外部引入调用<br>imgUpload: function(obj) {<br>var oInput = '#' + obj.inputId;<br>var imgBox = '#' + obj.imgBox;<br>var btn = '#' + obj.buttonId;<br>$(oInput).on("change", () => {<br>var fileImg = $(oInput)[0];<br>var fileList = fileImg.files;<br>for(var i = 0; i < fileList.length; i++) {<br>console.log(fileList[i])<br>var imgSrcI = this.getObjectURL(fileList[i]);<br>this.imgName.push(fileList[i].name);<br>this.imgSrc.push(imgSrcI);<br>this.imgFile.push(fileList[i]);<br>}<br>this.addNewContent(obj.imgBox);<br>console.log(obj);<br>}) //change<br>$(btn).on('click', () => {<br>if(!this.limitNum(obj.num)) {<br>alert("图片数量最多" + obj.num + "个");<br>return false;<br>} else if(this.imgFile.length == 0) {<br>layer.msg('请选择图片', {<br>icon: 2<br>});<br>} else if(this.imgFile.length > 0 && this.limitNum(obj.num)) {<br>//用formDate对象上传<br>alert('图片上传中请稍后');<br>var fd = new FormData($('.upBox')[0]);<br>for(var i = 0; i < this.imgFile.length; i++) {<br>fd.append(obj.data + "[]", this.imgFile[i]);<br>}<br>console.log(fd);<br>move.submitPicture(obj, obj.upUrl, fd);<br>}<br>}); //click<br>}, //return<br>//图片展示<br>addNewContent: function(obj) {<br>console.log(obj);<br>console.log(this.imgSrc.length);<br>$('#' + obj).html("");<br>for(var a = 0; a < this.imgSrc.length; a++) {<br>var oldBox = $('#' + obj).html();<br>$('#' + obj).html(oldBox + '<div class="imgContainer"><img title=' + move.imgName[a] + ' alt=' + move.imgName[a] + ' src=' + this.imgSrc[a] + ' οnclick="move.imgDisplay(this)"><p onclick="move.removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');<br>}<br>alert('您有' + this.imgSrc.length + '张图片预先加载完毕');<br>$("#wenzi").val(move.imgName[0])<br>},<br>//删除<br>removeImg: function(obj, index) {<br>console.log(0222)<br>console.log(1111)<br>console.log(index)<br>console.log(move.imgSrc)<br>console.log(obj); //obj为p标签<br>// 删除原来数组中的,并且返回被删除的项目<br>move.imgSrc.splice(index, 1);<br>move.imgFile.splice(index, 1);<br>move.imgName.splice(index, 1);<br>var boxId = $(obj).parent('.imgContainer').parent().attr("id");<br>move.addNewContent(boxId);<br>},<br>//限制图片个数<br>limitNum: function(num) {<br>if(!num) {<br>return true;<br>} else if(this.imgFile.length > num) {<br>return false;<br>} else {<br>return true;<br>}<br>},<br>//上传(将文件流数组传到后台)<br>submitPicture: function(obj, url, data) {<br>for(var p of data) {<br>console.log(p);<br>// p就是文件流<br>}<br>var plant = $("#cqName").val()<br>var name = $("#cqName").val();<br>if(url && data && plant) {<br>$(".layer1").ajaxSubmit({<br>url: 'addArea',<br>type: 'POST',<br>success: function (res) {<br>                   console.log(res)<br>}<br>})<br>}<br>},<br>//图片预览路径<br>getObjectURL: function(file) {<br>console.log(file)<br>var url = null;<br>if(window.createObjectURL != undefined) { // basic<br>url = window.createObjectURL(file);<br>console.log(url)<br>} else if(window.URL != undefined) { // mozilla(firefox)<br>console.log(url)<br>url = window.URL.createObjectURL(file);<br>} else if(window.webkitURL != undefined) { // webkit or chrome<br>console.log(url)<br>url = window.webkitURL.createObjectURL(file);<br>}<br>return url;<br>}<br>}<br>var removeImg = move.removeImg;<br>move.imgUpload({<br>inputId: 'file1', //input框id<br>imgBox: 'imgBox1', //图片容器id<br>buttonId: 'btn1', //提交按钮id<br>upUrl: 'addArea', //提交地址<br>data: 'file1', //参数名<br>num: "1" //上传个数限制<br>});

以上就是直播app开发搭建,动态广场内,图片上传到软件, 更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(23)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2022-08-31 成品直播源码推荐,TabLayout 去掉按下时的阴影效果
2022-08-31 视频直播app源码,Flutter实战底部导航栏
2022-08-31 app直播源代码,如何自适应页面剩余高度
2021-08-31 直播带货系统源码利用FloatingActionButton实现 展开/折叠多级悬浮菜单
2021-08-31 直播系统源代码实现RecyclerView折叠展开动画
2021-08-31 短视频平台源码Jetpack Compose异步加载图片实现
点击右上角即可分享
微信分享提示