Here I will discuss with you one of control, the feature of FileUpload control in ASP.NET. Using FileUpload control in ASP.NET you can upload multiple images using javascript and store images in selected folder.
This only need Jquery.min.js and FileUpload control.
Screen shot:
1. Multiple Images Upload
2. Choose Mulitple images
2. Preview of Multiple Images
Here is the example:
Script Path
//Here is the open source jquery file
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
Body
//Here is the source code of body
<body style="margin: 0px; padding: 0px;">
<form id="form1" runat="server">
<div align="center" style="width: 100%; height: auto; background-color: #cfcfcf;">
<div style="width: 960px; height: auto;">
<h1>
Multiple image upload with preview by Manjunath Bilwar</h1>
<div>
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview">
</div>
</div>
</div>
</div>
Script
//Here is the javascript creating preview thumbnails of multiple images
<script type="text/javascript">
// var url = window.URL || window.webkitURL; // alternate use
function readImage(file) {
var reader = new FileReader();
var image = new Image();
reader.readAsDataURL(file);
reader.onload = function(_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~ ~(file.size / 1024) + 'KB';
$('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
};
image.onerror = function() {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function(e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
</script>
</form>
</body>
Download Link
//Here you can download the simple demo project of Multiple Images upload
https://drive.google.com/file/d/0B7XVDU9gdC-lYTdHY2duRUMyNDQ/edit?usp=sharing
If you have any query comment will be appreciated :)
No comments:
Post a Comment