https://www.jq22.com/jquery-info22747
上面是我使用的一个上传插件。
使用场景：选择图片，点击提交按钮，上传到服务器。
遇到的问题是：我上传了正确的图片，点击提交按钮的时候，会执行if里（正常应该执行else里的）。也就是说我上传框的图片没问题，但是也alert。
这个问题在PC端重现不出来，只在手机和ipad偶尔出现过，所以不知道怎么调试。
submitInfo: function() {
var that = this
var img1 = ''
var img2 = ''
var imgList = []
// 判断上传框为空，或者上传非图片文件
if (!this.cupload1.uploadInput.files[0] ||
!this.cupload2.uploadInput.files[0] ||
!this.cupload1.uploadInput.files[0].base64 ||
!this.cupload2.uploadInput.files[0].base64) {
alert("请上传图片")
return;
} else {
img1 = this.cupload1.uploadInput.files[0].base64;
img2 = this.cupload2.uploadInput.files[0].base64;
imgList = [
{
fileSuffix: this.cupload1.uploadInput.files[0].fileSuffix,
fileData: img1,
},
{
fileSuffix: this.cupload2.uploadInput.files[0].fileSuffix,
fileData: img2,
},
]
}
var paramsObj = JSON.stringify({
params: {
idAttatchments: imgList
}
})
$.ajax({
type: "POST",
url: "XXXX",
contentType: "application/json;charset=UTF-8",
data: paramsObj,
success: function (data) {
that.deleteImg()
if (data.resultStatus === 'NORMAL') {
that.step = 'second'
} else {
alert(data.message);
return;
}
},
})
},
直接改获取dom中的预览图片数据来验证即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cupload例子</title>
</head>
<body>
<p>图片1</p>
<div id="cupload-1"></div>
<p>图片2</p>
<div id="cupload-2"></div>
<input type="button" onclick="obj.submitInfo()" value="开始上传" />
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jq22.com/demo/cupload202001100928/static/js/cupload.js"></script>
<script>
var obj = {
cupload1: new Cupload({ ele: '#cupload-1' }),
cupload2: new Cupload({ ele: '#cupload-2' }),
submitInfo: function () {
var ul = $('ul.cupload-image-list'), img = ul.find('img');
if (img.length != ul.length) {//图片容器和预览图片不一致（预览图片为选择图片未生成），所以只需要判断图片数量和容器是否一致就能知道是否选了图片
alert("请上传图片")
return
}
imgList = []
img.each(function () {
var arr = this.src.split(';base64,');
var fileSuffix = arr[0].split('/').pop().toLowerCase();
if (fileSuffix == 'jpeg') fileSuffix = 'jpg';
var item = {
fileSuffix: fileSuffix,
fileData: arr[1],
id: 'id不太清楚怎么命名的'
}
imgList.push(item);
});
console.log(imgList)
var paramsObj = JSON.stringify({
params: {
idAttatchments: imgList
}
});
$.ajax({
type: "POST",
url: "XXXX",
contentType: "application/json;charset=UTF-8",
data: paramsObj,
success: function (data) {
that.deleteImg()
if (data.resultStatus === 'NORMAL') {
that.step = 'second'
} else {
alert(data.message);
return;
}
},
})
}
}
</script>
</body>
</html>
打印一下this.cupload1.uploadInput，是不是数据结构不一样
源码里面是通过this.uploadInput.files.length来判断图片是否选择的，你也可以这样判断。
你的判断出问题的可能原因：
1、你if里面的cupload1，cupload2，首先要确定你这2个对象是完全独立的2个，如果你页面上要上传多个属性的图片，最好是完全独立的2套插件源码，这样才能相互独立控制对应属性的上传。
2、源码里面的file元素是动态创建的：需要确保你操作元素的时候已经渲染完成。
//源码里面，创建上传input
createUploadInput: function()
获取动态创建的元素一般有3种方式：最常用的第2种，所以建议你用jQuery，已经处理好了获取动态元素的方法。
// 1. 在模板引擎里面添加行内事件
// 2. 利用事件的委托获取(常用)
// 3. 在ajax的监听响应完成函数后面获取
PS：你问题里面提到了不能重现，偶尔出现过这些，很大的可能是元素渲染的问题，有时候元素生成了你可以获取到，有时候获取的时候元素还没有生成就获取不到。
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！