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