Description:-
In this example we explain that how to display
multiple images preview before upload in fileuplaod in asp.net using JavaScript
and jquery. Or display preview list of the selected images or browse images
before upload in file upload control at client side using JavaScript/jquery.
In many website that provide preview facility before
upload the file and that is really useful because user can easily show that
which images or file that he/she was uploaded.
Here we provide multiple files preview facility before
file upload without any post back using JavaScript and jquery.
Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="previewiamge.aspx.cs" Inherits="previewiamge" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
img {
padding-left:15px;
border:1px solid;
}
</style>
<%-- Using Javascript--%>
<script language="javascript" type="text/javascript">
window.onload = function () {
var flp_images = document.getElementById("flp_images");
flp_images.onchange = function () {
if (typeof (FileReader) != "undefined") {
var dvprvlistjs = document.getElementById("dvprvlistjs");
dvprvlistjs.innerHTML = "";
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
for (var i = 0; i < flp_images.files.length;
i++) {
var file = flp_images.files[i];
if (regex.test(file.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("IMG");
img.height = "80";
img.width = "80";
img.src =
e.target.result;
dvprvlistjs.appendChild(img);
}
reader.readAsDataURL(file);
} else {
alert(file.name + " is not a valid image
type.");
dvprvlistjs.innerHTML = "";
return false;
}
}
} else {
alert("This browser does not
support HTML5 FileReader.");
}
}
};
</script>
<%-- Using JQuery--%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#flp_images").change(function ()
{
if (typeof (FileReader) != "undefined") {
var dvprvlistjq = $("#dvprvlistjq");
dvprvlistjq.html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
$($(this)[0].files).each(function () {
var file = $(this);
if (regex.test(file[0].name.toLowerCase()))
{
var reader = new FileReader();
reader.onload = function (e) {
var img = $("<img />");
img.attr("style", "height:80px;width: 80px;");
img.attr("src", e.target.result);
dvprvlistjq.append(img);
}
reader.readAsDataURL(file[0]);
} else {
alert(file[0].name + "
is not a valid image type.");
dvprvlistjq.html("");
return false;
}
});
} else {
alert("This browser does not
support HTML5 FileReader.");
}
});
});
</script>
<title>Show /Display multiple images preview
before upload with FileUpload control using JavaScript and jQuery in asp.net</title>
</head>
<body>
<form id="form1" runat="server">
<input id="flp_images" type="file" multiple="multiple" />
<hr />
<b>Preview of File upload Images using
Javascript.</b>
<br />
<br />
<div id="dvprvlistjs">
</div>
<b>Preview of File upload Images using Jquery.</b>
<br />
<br />
<div id="dvprvlistjq">
</div>
</form>
</body>
</html>
0 comments:
Post a Comment