Previewing Uploaded Image

Question

Actually my question is similar to this question
The first answer for that question is quite usable for my work, but still have some problems when making it suit for me.

This is how my web page works.

I have a registration form for ski shop
One people can apply for many people(eg. father can apply for his family)
So depending on the count of members registrations forms will be generated.
So each registration form as added as a row of a table..

So actually this happening with a loop.Similar code is executing at run time.
HTML table and other widgets also created in run time with C# code.

So this is about my website.

My question is how to change the javaScript in this questions to handle dynamic ids of the image viewer and image choosers..

According to the image there is three forms.

So file chooser ids are 'file_img_0','file_img_1','file_img_2' and image viewer ids are 'user_img_0','user_img_1','user_img_3'.
So these IDs are automatically generated with the code according to the numbre of family member

So in this case how have several IDs,but in previous question it deals with single image.So the id is a distinct one.But here there are several image chooser IDs.So can anyone help me to adjust the javascript in previous question to fit to my problem or give me new solution.

DDan · Accepted Answer · 2015-08-14T06:30:51.253

1

You have plenty of option to solve this. If you don't want to use JQuery, you can use data attributes for example.

In HTML when defining the input you give it attribute:

<input type="file" ... data-thumbnail="user_img_1" ... />

, where you define the id of the preview, and in Javascript you set the preview based on that:

var preview = document.getElementById(input.dataset.thumbnail);

HTML:

<input type="file" name="image0" onchange="previewImage(this)" accept="image/*" data-thumbnail="user_img_0"/>
<img id="user_img_0" src="placeholder.png" class="placeholder" />
<br><br>
<input type="file" name="image1" onchange="previewImage(this)" accept="image/*" data-thumbnail="user_img_1"/>
<img id="user_img_1" src="placeholder.png" class="placeholder" />
<br><br>
    <input type="file" name="image2" onchange="previewImage(this)" accept="image/*" data-thumbnail="user_img_2"/>
<img id="user_img_2" src="placeholder.png" class="placeholder" />
<br><br>

JS:

function previewImage(input) {
    console.log(input.dataset.thumbnail);
    var preview = document.getElementById(input.dataset.thumbnail);
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        preview.setAttribute('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    } else {
      preview.setAttribute('src', 'placeholder.png');
    }
}

See it in action

edited Aug 14 '15 at 06:30

answered Aug 14 '15 at 06:16

DDan

7,436
4
29
47

Thank you very much..Your code works fine for me.Billion thanks for that. Now can you tell me, how can I save this image using C# code? – Punuth Aug 14 '15 at 07:31
The file objects will be in `Request.Files["name"]`, in this case `name` is `image0`, `image1` and `image2` – DDan Aug 14 '15 at 07:34
Here is an example of saving all files from Request to folder: http://stackoverflow.com/questions/15072040/how-to-save-a-post-request-content-as-a-file-in-net#15072059 – DDan Aug 14 '15 at 07:36
In here my image urls are held by HTML image tags as I shown in previous image. So these image tags have different different ids..Now I want to get there urls as String value.because I need them to resize. Aftre that i want to save it. However resizing and the saving part can be done if i am able to get the image url as string values in C#. So can elaborate the way of doing it.If you can please give me the code. – Punuth Aug 14 '15 at 08:02
I am not sure if I understand. You won't have a URL for the images the client uploads since, it is stored on the client's PC. Once the client picked image for upload and submits the data. The HttpRequest going to your server will have the images as HttpHostedFileBase in the Request.Files collection. On a file you can call SaveAs to save it in your server's PC, the client will still have his version on his PC and you won't have a URL to that. – DDan Aug 14 '15 at 08:06
Oh..Sorry..URL means the file path.As you mention once the client select image and fill the form then once the client click on the submit button I want to save those images in the server.While I am saving I needed to resize the image. – Punuth Aug 14 '15 at 08:16
Try like this: `string fileName = Request.Files["name"].FileName; //The path to the file on the client computer` – DDan Aug 14 '15 at 08:18
What should I pass for the "name"? it is ID of the image tag? – Punuth Aug 14 '15 at 08:20
The name attribute of the input field. in this case name is image0, image1 and image2 – DDan Aug 14 '15 at 08:24
The text filed values are obtained like this. item.FirstName = ((TextBox) Page.FindControl("ID" + item.ID.ToString() + "_txtFornavn")).Text; In here item means the one form.(in my above image there are three forms) How can I use same type of code to get the image path or name? – Punuth Aug 14 '15 at 09:46

Previewing Uploaded Image

1 Answers1