Question

我为图像上传预览创建了jquery，我希望我的按钮删除功能会在点击时切换回默认图像（占位符）。删除的条件是当按钮删除得到点击它将检查是否图像上传预览不等于我的占位符然后它将切换回占位符。从这里它运作良好，但因为我有两个图像上传预览，当我点击按钮删除它切换图像上传预览到默认图像（占位符）。我如何制作特定的，以便它只更改我想要删除的图像上传预览。

第二个问题是当图像预览仍处于默认图像（占位符）时如何隐藏图像页脚，并且在我选择上传图像后它将显示

  <div class="image-upload">
        <label for="inputFile1">
            <img id="image_upload_preview1" class="main-image"src="img/550.png"/>
               <div class="img-footer">
                  <div class="remove-do">
                    <button type="button"  class="btn btn-alert btn-remove default" style="padding: 0px 5px;" aria-label="Left Align">
                        <i class="fa fa-times" title="Delete" aria-hidden="true" style="color: white;"></i>
                        <span class="sr-only">Delete</span>
                    </button>
                    <p style="display: inline-block;">remove</p>
        </div>
     </div>
    </label>
    <input id="inputFile1" type="file"/>
        </div>

    <div class="image-upload">
        <label for="inputFile2">
            <img id="image_upload_preview2" class="sub-image" src="img/550.png"/>
                <div class="img-footer" style=" left: 15px; right: 15px;">
                    <div class="remove-do">
                        <button type="button" class="btn btn-alert btn-remove default" style="padding: 0px 5px;" aria-label="Left Align">
                            <i class="fa fa-times" title="Delete" aria-hidden="true" style="color: white;"></i>
                            <span class="sr-only">Delete</span>
                        </button>
                        <p style="display: inline-block;">remove</p>
                    </div>
                </div>
             </label>
            <input id="inputFile2" type="file"/>
        </div>


    ---image preview---
                // 1    
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#image_upload_preview1').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }


        }
        // /1

        // 2
          function readURLs(input) {
           if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#image_upload_preview2').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }


        }
        // /2
        $("#inputFile1").change(function () {
            readURL(this);
        });
        $("#inputFile2").change(function () {
            readURLs(this);
        });
    --image preview end--

    --function for remove and hide/show image footer--

     $(document).ready(function() { 
                var src = $(".image-upload").attr('src');

                if(src=="img/550.png")
                    $('.img-footer').hide();
                 else
                   $('.img-footer').show();

               $('.default').click(function(){
                 var src = $(this).closest(".image-upload").find('img').attr('src')[0];

                 if(src!="img/550.png")
                   $(".image-upload img").attr('src',"img/550.png");
               });

            });

           --end function for remove and hide/show image footer--

这里是我的示例代码的链接。 https://jsfiddle.net/bLkzc1vc/

Jquery隐藏和显示并切换具有条件的图像

0 个答案: