Upload Image Preview With Remove BUtton Using Javascript CSS HTML In Asp.Net
HTML CODE:
<div class="field" align="left">
<label>Upload foto utama</label>
<asp:FileUpload ID="FileUpload1" runat="server" name="files[]" multiple />
</div>
CSS CODE:
<style type="text/css">
input[type="file"] {
display: block;
}
.imageThumb {
max-height: 100px;
padding: 1px;
cursor: pointer;
border: 2px solid red;
border-radius: 5px;
width:100%;
}
.pip {
display: inline-block;
margin: 10px 10px 0 0;
}
.remove {
display: block;
border: 1px solid black;
cursor: pointer;
background-color: #ff0000;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
padding: 5px 12px;
}
.remove:hover {
background: #4CAF50;
color: white;
}
</style>
JAVASCRIPT CODE:
<script type="text/javascript">
$(document).ready(function () {
if (window.File && window.FileList && window.FileReader) {
$("#<%: FileUpload1.ClientID %>").on("change", function (e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function (e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\">Remove</span>" +
"</span>").insertAfter("#<%: FileUpload1.ClientID %>");
$(".remove").click(function () {
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
</script>
Thanks A Lot
0 Komentar