javascript - how to show delete button in right corner of Image - Stack Overflow

admin管理员组

文章数量:1024640

I have file input where after selecting image file a image preview is shown, Here is the jquery code

<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

Html code->

<input type="file" name="image_file" id="cretor" accept="image/*" onchange="loadFile(event)">
<img id="output" width="80" height="80"> 

The above codes generate image preview instantly after selecting an image but how can i show delete button in the top right corner of image and reset the file input and remove that image

here is what I've tried to show delete button at top right corner of image

<div class="img-wrap">
    <button id="clear" onclick="twz()">x</a>
    <img src="blob:" id="output">
</div>

CSS

.img-wrap {
    position: relative;

}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;

}

Now how can i generate button and place it in the right corner because loadFile function only generate image preview

I have file input where after selecting image file a image preview is shown, Here is the jquery code

<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

Html code->

<input type="file" name="image_file" id="cretor" accept="image/*" onchange="loadFile(event)">
<img id="output" width="80" height="80"> 

The above codes generate image preview instantly after selecting an image but how can i show delete button in the top right corner of image and reset the file input and remove that image

here is what I've tried to show delete button at top right corner of image

<div class="img-wrap">
    <button id="clear" onclick="twz()">x</a>
    <img src="blob:https://www.example./c880bfa4-25d0-4e2b-91e4-d722b864cc79" id="output">
</div>

CSS

.img-wrap {
    position: relative;

}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;

}

Now how can i generate button and place it in the right corner because loadFile function only generate image preview

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Apr 24, 2016 at 20:02 Aniket SinghAniket Singh 87744 gold badges1717 silver badges4242 bronze badges 1

• Quick observation... <button id="clear" onclick="twz()">x</a> has an anchor closing tag. – user6245342 Commented Apr 24, 2016 at 20:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

There is 2 mistakes in your code:

1- you didn't close correctly your button so the right markup should be:

<input type="file" name="image_file" id="cretor" accept="image/*"onchange="loadFile(event)">


<div class="img-wrap">
<button id="clear" class="hide" onclick="twz()">x</button>
<img id="output" width="80" height="80"> 

2- The second is that in your css you try to select a class named close, but the markup has a id="clear" so you can change your css in this way and it will work fine:

.img-wrap {
position: relative;
float:left;
}

 .img-wrap #clear {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;

}

 .hide{
  display:none;
 }

You can show the button only when the image is choosen removing the class hide from the button. Your script bees:

<script>
 var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
$("#clear").removeClass("hide");
};
</script>

I have file input where after selecting image file a image preview is shown, Here is the jquery code

<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

Html code->

<input type="file" name="image_file" id="cretor" accept="image/*" onchange="loadFile(event)">
<img id="output" width="80" height="80"> 

The above codes generate image preview instantly after selecting an image but how can i show delete button in the top right corner of image and reset the file input and remove that image

here is what I've tried to show delete button at top right corner of image

<div class="img-wrap">
    <button id="clear" onclick="twz()">x</a>
    <img src="blob:" id="output">
</div>

CSS

.img-wrap {
    position: relative;

}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;

}

Now how can i generate button and place it in the right corner because loadFile function only generate image preview

I have file input where after selecting image file a image preview is shown, Here is the jquery code

<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

Html code->

<input type="file" name="image_file" id="cretor" accept="image/*" onchange="loadFile(event)">
<img id="output" width="80" height="80"> 

The above codes generate image preview instantly after selecting an image but how can i show delete button in the top right corner of image and reset the file input and remove that image

here is what I've tried to show delete button at top right corner of image

<div class="img-wrap">
    <button id="clear" onclick="twz()">x</a>
    <img src="blob:https://www.example./c880bfa4-25d0-4e2b-91e4-d722b864cc79" id="output">
</div>

CSS

.img-wrap {
    position: relative;

}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;

}

Now how can i generate button and place it in the right corner because loadFile function only generate image preview

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Apr 24, 2016 at 20:02 Aniket SinghAniket Singh 87744 gold badges1717 silver badges4242 bronze badges 1

• Quick observation... <button id="clear" onclick="twz()">x</a> has an anchor closing tag. – user6245342 Commented Apr 24, 2016 at 20:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

There is 2 mistakes in your code:

1- you didn't close correctly your button so the right markup should be:

<input type="file" name="image_file" id="cretor" accept="image/*"onchange="loadFile(event)">


<div class="img-wrap">
<button id="clear" class="hide" onclick="twz()">x</button>
<img id="output" width="80" height="80"> 

2- The second is that in your css you try to select a class named close, but the markup has a id="clear" so you can change your css in this way and it will work fine:

.img-wrap {
position: relative;
float:left;
}

 .img-wrap #clear {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;

}

 .hide{
  display:none;
 }

You can show the button only when the image is choosen removing the class hide from the button. Your script bees:

<script>
 var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
$("#clear").removeClass("hide");
};
</script>

本文标签： javascripthow to show delete button in right corner of ImageStack Overflow