Hiii Everyone, I tried with below code for upload preview and delete images. Below is my code for upload and delete.
Javascript Code
<script>
var blank="";
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.height(100).width(100);
};
reader.readAsDataURL(input.files[0]);
}
else {
var img = input.value;
$('#img_prev').attr('src',img).height(100).width(100);
}
$("#x").show().css("margin-right","10px");
}
$("#x").click(function() {
$("#img_prev").attr("src",blank);
$("#x").hide();
$("#photo1").val("");
});
</script>
HTML Code
<input name="userImage[]" type='file' onchange="readURL(this);" class="inputFile" id="photo1"/></div>
<span id="previewPane1">
<img id="img_prev" src="#" alt="Upload your image" width="100" height="50"/>
<span id="x">[X]</span>
Below is the output i got for this is
ANd After press X it is replace as empty filename.But what i want to do is while retrieve from database i can show only image i cannot show delete button and my filename also set instead of No file chosen.
Code Which i tried to retrieve is
<input name="userImage[]" type='file' onchange="readURL(this);" class="inputFile" id="photo1" ACCEPT="image/*"/></div>
<div class="col-md-4"><span id="previewPane">
<?php if($photo==''){?>
<img id="img_prev" src="#" alt="Upload your image" width="100" height="50"/>
<span id="x">[X]</span><?php } ?>
<span id="previewPane">
<?php if($photo!=''){?>
<img id="img_prev" src="<?php echo $photo;?>" alt="Upload your image" width="100" height="100"/>
<span id="x">[X]</span>
<?php
} ?>
</span>
$photo is the variable having image name which is retrieve from database.But what i get while i tried this is
While retrieve from database i can show image but X button is missing and input file is not set with file name as default no file chosen is showing.What i missed here.Could anyone help me to get out of this problem.
My CSS code is:
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
Value for file input
Due to security reasons it is not possible to setup the values for the file input.
<!-- If you can, Anyone can stole your files -->
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>
Not Displaying Remove Icon
Your display icon not showing up as you have added the property display:none;
whch hides the element on the page. You can look for more display options here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.