我正在尝试上传多个图像(具有预览和删除功能)并将其保存到数据库。在这里,我可以预览多个上传的图像,但是由于我在更改事件上使用jquery进行上传,因此它将我先前选择的图像替换为新选择的图像。我希望将这两个图像都上传并存储在数据库中。
HTML代码
<input type="file" id="publisher-photos" accept="image/x-png, image/gif, image/jpeg" name="postPhotos[]" multiple="multiple">
jquery代码
$("#publisher-photos").on('change', function() {
//Get count of selected files
var product_countFiles = $(this)[0].files.length;
var product_imgPath = $(this)[0].value;
var extn = product_imgPath.substring(product_imgPath.lastIndexOf('.') + 1).toLowerCase();
var product_image_holder = $("#productimage-holder");
var product_image_holder_length = $("#user-story-total input#hidden_files_added").val();
var total_image_length = product_countFiles + Number(product_image_holder_length);
// product_image_holder.find('img').remove();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
if(product_image_holder_length < 20){
if(total_image_length <= 20) {
$(".create-status-alert").addClass('hidden');
//loop for each file selected for uploaded.
for (var i = 0; i < product_countFiles; i++)
{
var product_reader = new FileReader();
var ii = 0;
product_reader.onload = function(e) {
name = "'"+$("#publisher-photos")[0].files[ii].name+"'";
src = "'"+e.target.result+"'";
$('<span class="thumb-image thumb-image-delete product_uploaded_images" id="delete_uploaded_image_by_id_'+ii+'"><span class="pointer thumb-image-delete-btn-product" onclick="DeleteUploadedImageById('+name+','+ii+',this)"><i class="fa fa-remove"></i></span><div class="background_image_product" style="background-image: url('+src+');"></div></span>').appendTo(product_image_holder);
ii = ii +1;
}
product_image_holder.show();
product_reader.readAsDataURL($(this)[0].files[i]);
$("#user-story-total").removeClass('hidden').slideDown(200);
}
$("#user-story-total input.bg_read_input").val(total_image_length + ' file(s) selected');
$("#user-story-total input#hidden_files_added").val(total_image_length);
} else{
$(".create-status-alert").removeClass('hidden');
}
} else{
$(".create-status-alert").removeClass('hidden');
}
} else {
product_image_holder.html("<p>This browser does not support FileReader.</p>");
}
}
});
PHP代码
print_r($_FILES['postPhotos']);
exit;
我在这里得到的是新选择的图像阵列,而不是先前选择的图像。