Multiple images uploaded on WeChat must be uploaded one by one, which means that they cannot be parallel, and they must be serial:
Then we can define an upload function as shown below:
var serverIds = [];
function uploadImages(localImagesIds) {
if ( === 0) {
$.showPreloader('Submitting data...');
$('form').submit();
}
({
localId: localImagesIds[0], // The local ID of the image to be uploaded is obtained from the choiceImage interfaceisShowProgressTips: 1, // Default is 1, display progress promptssuccess: function (res) {
(); // Return the server ID of the picture();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert('Upload failed, please upload again! ');
}
});
}
The upload function is defined, so when clicking on the picture box, you need to select the picture, and the definition is as follows:
//Select a picture$('#uploadImages img').on('click', function () {
var $img = $(this);
({
count: 1, // Default 9sizeType: ['original', 'compressed'], // You can specify whether it is an original or a compressed image, and both are defaultsourceType: ['album', 'camera'], // You can specify whether the source is an album or a camera, and both are defaultsuccess: function (res) {
var localIds = ; // Return the local ID list of the selected photo. LocalId can display the picture as the src attribute of the img tag.//$.alert(localIds[0]);
$('src', localIds[0]).addClass('uploaded');
},
fail: function (res) {
alert((res));
}
});
});
When the user selects all the pictures, he or she needs to upload the pictures. Here we need to use the function we just defined, the specific code is as follows:
//Submit Event$('#btnSubmit').on('click', function () {
var $chooseImages = $('#uploadImages ');
if ($ === 0) {
$.alert('Please upload the photos! ');
return;
}
$.showPreloader('Uploading photos...');
var localImagesIds = [];
$(function () {
($(this).attr('src'));
});
uploadImages(localImagesIds);
});
As shown in the above code, the function uploadImages is called again, and then localImagesIds is passed. In the uploadImages function, recursion is used, but after an image is uploaded, it will call itself again and continue to upload the next image. Please pay attention to the following key code:
({
localId: localId, // The local ID of the image to be uploaded is obtained from the choiceImage interfaceisShowProgressTips: 1, // Default is 1, display progress promptssuccess: function (res) {
(); // Return the server ID of the picture();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert('Upload failed, please upload again! ');
}
});
In this way, everything looks OK and there is no problem with the Android system. However, IOS cannot upload normally and will always display the loading status. If the code is repeatedly checked, there is no problem, then it must be a trap for WeChat. . . .
After experiencing 81 difficulties, I finally found a solution:
var localId = localImagesIds[0];
//Solve the pitfall that IOS cannot uploadif (("wxlocalresource") != -1) {
localId = ("wxlocalresource", "wxLocalResource");
}
The uploadImages code is as follows:
function uploadImages(localImagesIds) {
if ( === 0) {
$.showPreloader('Submitting data...');
$('form').submit();
}
var localId = localImagesIds[0];
//Solve the pitfall that IOS cannot uploadif (("wxlocalresource") != -1) {
localId = ("wxlocalresource", "wxLocalResource");
}
({
localId: localId, // The local ID of the image to be uploaded is obtained from the choiceImage interfaceisShowProgressTips: 1, // Default is 1, display progress promptssuccess: function (res) {
(); // Return the server ID of the picture();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert('Upload failed, please upload again! ');
}
});
}
The above is a related introduction to the upload of multiple images of WeChat JSSDK and solving the problem of loading uploads and IOS systems. I hope it will be helpful to everyone!