ASP.NET CLOUD: Multiple Image Upload

Friday, 14 February 2014

How to Upload/Display Image in Picture Box using OpenFileDialog in c# .net

Introduction:

Browsing and displaying an image in picture box tool using Windows Forms application is a very simple task. In this application, we use the following classes/controls to do the b.

- OpenFileDialog
- PictureBox
- TextBox
- Button

Main Functions:

This functions simply perform the following steps:
1. Open a file dialog box so that a user can select an image from his/her machine
2. Browse the image
3. Display selected image in a picture box on a Form
4. Display image file path in text box

Screen Shot:

Screen 1

Screen 2

Screen 3

Source Code:

            //Initialize Componets
        public ImageUploadAndPreview()
        {
            InitializeComponent();
        }

        //When Button Click
        private void button1_Click(object sender, EventArgs e)
        {
            // open file dialog
            OpenFileDialog open = new OpenFileDialog();

            // Filter Image
            open.Filter = "Image Files(*.jpg; *.jpeg; *.gif;     *.bmp)|*.jpg; *.jpeg; *.gif; *.bmp";
            if (open.ShowDialog() == DialogResult.OK)
            {
                pbImage.Image = new Bitmap(open.FileName);
                pbImage.SizeMode = PictureBoxSizeMode.StretchImage;
                txtImage.Text = open.FileName;
            }
        }

What is an image filter?

Image filter is basically a filter that restrict user to select only valid image file. You can remove image filter.

Download Link

https://drive.google.com/file/d/0B7XVDU9gdC-lZGRjdENjMGpiNWs/edit?usp=sharing

If you have any query feel free to comment it will be appreciated :)

Tuesday, 24 December 2013

Upload Multiple Images with Preview Using FileUpload Control in ASP.NET Using Javascript

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

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 :)

Friday, 14 February 2014

How to Upload/Display Image in Picture Box using OpenFileDialog in c# .net

Introduction:

Main Functions:

Screen Shot:

Screen 1 Screen 2 Screen 3

Source Code:

What is an image filter?

Download Link

Tuesday, 24 December 2013

Upload Multiple Images with Preview Using FileUpload Control in ASP.NET Using Javascript

1. Multiple Images Upload

2. Choose Mulitple images

2. Preview of Multiple Images

Script Path

Body

//Here is the source code of body

Script

//Here is the javascript creating preview thumbnails of multiple images

} $("#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

Screen 1

Screen 2

Screen 3

}
$("#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>