Question

我在上传前为预览图片制作了演示，如下所示。

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result).show();
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#uploadphoto").change(function () {
    readURL(this);
    $('#preview').show();
});

$('#preview').on("click", function () {
    $('#uploadphoto').replaceWith(selected_photo = $('#uploadphoto').clone(true));
    $('#preview').removeProp('src').hide();
    $('#uploadphoto').val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadphoto" />
<img id="preview" src="">

但问题是当我有<img id="preview" src="">时，这是有用的如果我想在div部分预览图像怎么办？并删除div中的图像，如

<input type="file" id="uploadphoto" />
<!--PREVIEW IMAGE IN THIS DIV-->
<div id="preview">

预览后点击删除图片。如果你的答案是小提琴，那就很容易理解了。

感谢。

Answer 1

检查它有用的代码片段，如果我理解正确，你想删除img标签并在div部分显示图像预览。

＆＃13;

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $($.parseHTML('<img>')).attr('src', event.target.result).appendTo('#preview').width(100).height(100);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#uploadphoto").change(function () {
    readURL(this);
    $('#preview').show();
});

$('#preview').on("click", function () {
    $('#uploadphoto').replaceWith(selected_photo = $('#uploadphoto').clone(true));
    $('#preview').removeProp('src').hide();
    $('#uploadphoto').val('');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadphoto" />
<div id="preview"></div>

＆＃13;

Answer 2

尝试使用div background-image in jquery

＆＃13;

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      // $('#preview').attr('src', e.target.result).show();
      $('#preview').css("height", "300px");
      $('#preview').css("width", "300px");
      $('#preview').css("background-image", "url(" + e.target.result + ")").show();
      $('#preview').css("background-size","cover"); 


    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#uploadphoto").change(function() {
  readURL(this);
  $('#preview').show();
});

$('#preview').on("click", function() {
  $('#uploadphoto').replaceWith(selected_photo = $('#uploadphoto').clone(true));
  $('#preview').removeProp('src').hide();
  $('#uploadphoto').val('');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadphoto" />
<!--<img id="preview" src="">-->
<div id="preview"></div>

＆＃13;

Answer 3

试试这个

function Preview_Image_Before_Upload(fileinput_id, preview_id) {
  var oFReader = new FileReader();
  var fileArray = [];
  fileArray.push(document.getElementById(fileinput_id).files[0])
  fileArray.forEach(function(entry) {

    oFReader.readAsDataURL(fileArray[0]);

  });

  //console.log(fileArray)

  // oFReader.readAsDataURL(fileArray[0]);
  oFReader.onload = function(oFREvent) {
    if (window.FileReader && window.File && window.FileList && window.Blob) {

      var elem = document.getElementById("uploadPreview");
      elem.src = oFREvent.target.result;
     // document.getElementById("placehere").appendChild(elem);
      document.getElementById("uploadPreview").innerHTML=elem;
    }



  };
};


function removeFns(){
  
  //document.getElementById("uploadPreview").innerHTML=null;
document.getElementById('uploadImage').value = ""
  document.getElementById('uploadPreview').src = "#";
  
}

<input type="file" id="uploadImage" onchange="Preview_Image_Before_Upload('uploadImage', 'uploadPreview');" name="termek_file" class="file_input" />
<img id="uploadPreview" onclick="removeFns()" class="uploadPreview" width="100" />
<div id="placehere" class="uploadPreview" width="100">

Answer 4

您可以使用此代码清除图像

$("preview").remove()

从div中删除预览图像

4 个答案: