如何跨不同文件传送图像？

Question

好的，所以我真的希望将文件从文件B传送到文件A.因此，当他们使用上传按钮上传图像（在代码＆＃39; B＆＃39;中）时，它会显示在＆＃34;嗒嗒＆＃34;和＆＃34; Blah2＆＃34;现在我需要它做的事实上显示在代码<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">所在的位置（在代码＆＃39; B＆＃39;中）和<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">所在的位置（在代码A中）但是我不知道＃39;了解如何将代码转移到/来自＆＃34;代码B＆＃34;到＆＃34;代码A＆＃34;？任何建议和任何帮助是非常/令人难以置信的赞赏，因为我已经试图解决这个问题一个星期现在没有在哪里.......谢谢你甚至看！

代码A：

<!-- Bold: Options 4-5 -->
{% if builder[0] %}
<img src="{{ builder[1] }}" alt="{{ builder[0] }}" /> 
{% else %}

                  <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
                </a>


<!-- Bold: Options 4-6 -->
{% include 'boldoptions' with 'step6' %}
<!-- // end Options 4-6 -->

{% endif %}
 <!-- // end Options 4-5 -->

代码B：

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <br>
    <img id="blah" src="" alt="Upload Image" />

     <img id="blah2" src="" alt="Upload Image" />

     <img id="grooved" src="https://lh3.googleusercontent.com/-6WXP99pR7HU/Vpa-nIDksdI/AAAAAAAAMkA/r59f0in-YyA/s800-Ic42/Grooved%252520View%252520For%252520Shopify.png" alt="your image" height="100" />
</form>

    <br/>
    <div id="noFileError" style="display:none;">
        <b>Please select a valid image file.</b>
    </div>
    <button id="checkimage" style="display:none;"> Check Image </button>
    <br/>
    <b>Resolution Check Result: </b>
  <p>If nothing is displayed underneath that means your image is top quality and ready for printing!</p>
    <p>

    </p>
    <div id="imageValidationError" style="display:none;">
        <b id="LR">Unfortunatley the image resolution is too low for our pixboards, you may still proceed with using the image but we cannot guarentee it will be a great resolution! By proceeding with this image you're agreeing and aknowladge that the resolution will not be to the high standards advertised.</b>
    </div>


  <style>

    #LR {
     color: red; 
    }

::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);

    background-color: #F5F5F5;
}

::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
    background-color: #555;
}

#blah {
 width:550px; 
  height:550px;
  background-image: url('path/to/image');
  background-position: center;
  background-size: cover;
}

#blah2 {
 width:550px; 
  height:550px;
  background-image: url('path/to/image');
  background-position: center;
  background-size: cover;
  position: absolute;
}

#grooved {
  width: 550px;
  height: 550px;
  position: absolute;
  top: auto 0;
}
  </style>

  <script>
       function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

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

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

    $("#imgInp").change(function(){
        readURL(this);
    });


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

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

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

    $("#imgInp").change(function(){
        readURL2(this);
    });

    var _URL = window.URL || window.webkitURL;

function isSupportedBrowser() {
    return window.File && window.FileReader && window.FileList && window.Image;
}

function getSelectedFile() {
    var fileInput = document.getElementById("imgInp");
    var fileIsSelected = fileInput && fileInput.files && fileInput.files[0];
    if (fileIsSelected)
        return fileInput.files[0];
    else
        return false;
}

function isGoodImage(file) {
    var deferred = jQuery.Deferred();
    var image = new Image();

    image.onload = function() {
        // Check if image is bad/invalid
        if (this.width + this.height === 0) {
            this.onerror();
            return;
        }

        // Check the image resolution
        if (this.width >= 3000 && this.height >= 2000) {
            deferred.resolve(true);
        } else {
            $("#imageValidationError").show();
            deferred.resolve(false);
        }
    };

    image.onerror = function() {
        $("#noFileError").show();
        deferred.resolve(false);
    }

    image.src = _URL.createObjectURL(file);

    return deferred.promise();
}

/** New Code **/
    $("#checkimage").click(function(){


      if (isSupportedBrowser()) {

          var file = getSelectedFile();
          if (!file) {
              $("#noFileError").show();
              return;
          }

          isGoodImage(file)
      }
    })
  </script>

<div class="product-single">
    <div class="grid product-single__hero">
      <div class="grid__item large--one-half">
        <div class="product-single__photos" id="ProductPhoto">
          {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
         <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg"{% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>      
        </div>
      </div>