更改事件上的jQuery用新选择的图像替换了我先前选择的图像

时间:2019-07-07 18:37:10

标签: javascript php jquery

我正在尝试上传多个图像(具有预览和删除功能)并将其保存到数据库。在这里,我可以预览多个上传的图像,但是由于我在更改事件上使用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;

我在这里得到的是新选择的图像阵列,而不是先前选择的图像。

0 个答案:

没有答案