How to remove one image file from input file multiple

JavaScript
1

i have five input type file to choice image for upload,but when i click remove one image all image was delete,i just want to delete one image that i click

<table>
<tr>
    <td>
        <img id="uploadPreview1" src="no_image.jpg" /><br />
        <input id="uploadImage1" type="file" name="p1" onchange="PreviewImage(1);" />
        <a href=""  onClick="delete(1)">Remove</a>
    </td>
    <td>
        <img id="uploadPreview2" src="no_image.jpg" /><br />
        <input id="uploadImage2" type="file" name="p2" onchange="PreviewImage(2);" />
        <a href=""  onClick="delete(1)">Remove</a>
    </td>
    <td>
        <img id="uploadPreview3" src="no_image.jpg" /><br />
        <input id="uploadImage3" type="file" name="p3" onchange="PreviewImage(3);" />
        <a href=""  onClick="delete(1)">Remove</a>
    </td>
    <td>
        <img id="uploadPreview4" src="no_image.jpg" /><br />
        <input id="uploadImage4" type="file" name="p4" onchange="PreviewImage(4);" />
        <a href=""  onClick="delete(1)">Remove</a>
    </td>    
</tr>
</table>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function delete(no) {   
            document.getElementById("uploadImage"+no).value = "";   
}
    </script>        
<script type="text/javascript">
    function PreviewImage(no) {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
        };
    }
</script>

1280×1024 129 KB

3

my code here

1280×1024 128 KB

4

Off Topic

Welcome to the forums, @hung_nguyen1.

When you post code here, you need to format it so that it will display correctly in your post.

You can highlight your code, then use the </> button in the editor window, which will format it, or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

5

you can also use :

[code][/code]
6

I’m not a js expert but its probably the fact that your onclick handler has the same number in each.

onClick="delete(1)

You need to increment that for each input.

e.g.

onClick="delete(2)

and so on…

7

i had solved it but it’s no working on firefox

<!DOCTYPE html>
<html>
<head><title>Sample</title></head>
<body>
<table>
<tr>
<td>
<img id="uploadPreview1" src="no_image.png" width="200" height="200"/><br />
<input id="uploadImage1" type="file" name="p1" onchange="PreviewImage(1);" />
<a href="" onClick="deleteit(1);">Remove</a>
</td>
<td>
<img id="uploadPreview2" src="no_image.png" width="200" height="200"/><br />
<input id="uploadImage2" type="file" name="p2" onchange="PreviewImage(2);" />
<a href="" onClick="deleteit(2);">Remove</a>
</td>
<td>
<img id="uploadPreview3" src="no_image.png" width="200" height="200"/><br />
<input id="uploadImage3" type="file" name="p3" onchange="PreviewImage(3);" />
<a href="" onClick="deleteit(3);">Remove</a>
</td>
<td>
<img id="uploadPreview4" src="no_image.png" width="200" height="200"/><br />
<input id="uploadImage4" type="file" name="p4" onchange="PreviewImage(4);" />
<a href="" onClick="deleteit(4);">Remove</a>
</td>
</tr>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function deleteit(no) {
debugger;
document.getElementById("uploadPreview"+no).src = "no_image.png";
document.getElementById("uploadImage"+no).value=""; 
event.preventDefault();
}
</script>
<script type="text/javascript">
function PreviewImage(no) {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
};
}
</script>
</body>
</html>
8

try clearing your cache in firefox.

9

I think you need to pass the event so that you can cancel it.

e.g.

onClick="deleteit(event,3)

and then:

function deleteit(event, no) {

Hopefully one of the js experts will come along and tidy this up for you as you should really remove those inline handlers.:slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.