We Keep Coding

Displaying images from file inputs in Javascript

I need to run a function when someone has finished selecting a file using the file input service. By "file input service", I mean:
<input type="file" name = "foo" id="foo">
I have tried to do this in various ways, first by creating a form to do so and using other techniques, but nothing seems to work. There are several ways to detect if the thing has something, like by using:
document.getElementById("foo").files[0]
This only returns a value if you run it, but I cannot constantly compile a while statement to do this.

Pure Javascript
You can use pure javascript like below. This code basically uses document.getElementById() to get the input element, and .addEventListener() and change to do something when the input field is changed.
document.getElementById("foo").addEventListener("change", function() {
console.log("Changed");
});
<input type="file" name="foo" id="foo">
jQuery
Use jQuery .change(). Basically, this code will console.log "Changed" when the input changes (you add a file).
$("#foo").change(function() {
console.log("Changed");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="foo" id="foo">

How to automatically start upload after browse?

is there a way to automatically call a function using an event after the user has browsed a file using a
<input type="file">
I've been trying to find something for the past hour but failed horribly, I saw that I should try onchange but that also failed..

There is a way:
<input type="file" onchange="myFunction()">
The onchange is simple. So, I'm guessing that the code that is getting triggered is failing. You need to be able to retrieve the file from the INPUT object. To pass the file as an argument on the function call, you can use something like this:
<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.parentNode)" >
</form>
If you do it that way, the arg passed with be an object from the FORM, then you need to get the object of the INPUT that is inside of the FORM object.
If you want to avoid that, you can use something like this:
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
That passes the first file from the INPUT object to the picUpload function.

How to add data to HTML for javascript to use

I have a dynamically created page with repeated elements, like so:
<input type="file" name="file1">
<input type="file" name="file2">
<input type="file" name="file3">
I would like to add some data to each of these elements for use in JavaScript. Originally I used "spare" attributes that while valid on an input tag were not valid on a file type input tag, eg, size. I have now added it to the class attribute, but have to use a regex to get it out again. Neither of these methods seem very satisfactory, is there a better way?

Quite often I see data added through attributes that are prefixed with data-, for instance:
<input type="file" name="file1" data-filesize="871">
jQuery even has function to conveniently read that information, for instance like this:
var filesize = $('input[name="file1"]').data('filesize');
And, to write the data, attr can be used:
$('input[name="file1"]').attr("data-filesize", filesize );
See also: HTML 5 data atributes

You can use attributes with a name starting with "data-"

Use the data attribute: <input data-something="somevalue" />

with attribute start with data- you can use your own other name appending to it.
Go through this examples

Upload files from multi input fields

I used to use this method to upload a file without refresh the page:
AJAX file upload tutorial
and it works fine, but now I need to upload multi files through multi input fields, something like that:
Personal Photo: <input name="myfile1" type="file" />
Certificate1 Image: <input name="myfile2" type="file" />
Certificate2 Image: <input name="myfile3" type="file" />
so how can I do that without re-write startUpload, and stopUpload function with a new title "like startUpload2, and stopUpload2 for 'myfile2' input, and another for myfile3... etc"?

The enctype="multipart/form-data" on your form will allow for multiple file uploads. For those functions you refer to, you will either have to loop through the inputs and apply the functions to each input or apply a slightly different function to the form itself.

Passing forms between html pages

I've got an assignment to pass data between 2 .htm pages, in a manner which the source gets copied to the destination.
sourcePage.htm contains a form. (it contains more controls this is just a sample)
<form id="myform" action="destPage.htm" method="get" >
<input type="text" name="user" />
<input type="submit" name="submit" value="Submit" />
</form>
and destPage.htm is blank.
Using JavaScript I am required to parse the data from the url, that part isn't the problem
, the problem is that I am also required that destPage would be an exact duplicate of sourcePage.
My question is, if there's a way to pass the form as an object or some way to pass the control types and their properties along side the data.

You specified in the answer of ek_ny, that you want to dynamically build the form, based on it's input.
You can do this, in fact, with the JavaScript DOM:
var i = document.createElement('input');
i.setAttribute('type', "text");
i.setAttribute('name', "user");
var f = document.createElement('form');
f.setAttribute('action', "destpage.html");
// etc.
f.appendChild(i);
document.getElementById('container').appendChild(f);
The form will be added as a child in the <div id="container"> container.
Now you can use hidden input elements, which give, for instance, the specifics of the form:
<form>
<input type="hidden" name="x_type" value="input-text" />
<input name="x" type="text" />
<input type="hidden" name="y_type" value="select:[...]" />
<select name="y">
...
</select>
</form>

As far as I know, you won't be able to do a post between two pages. At least when I've attempted that you get an error-- it really doesn't make sense to have a post from one static page to the other (right?). What you can do is serialize the data you want to pass, put it on the url string to the next page and then deserialize that data and populate the controls on the destination page. If the html between the two pages is identical, then it should be pretty straightforward, if not it will be a little tricker. If you used jQuery it would be pretty easy, because you could serialize an entire form. If you need to come up with a generic solution (and you should, because it will help you learn) that's one thing, if you need to just get it working for this assignment and there are only a couple of form fields, you'll just need to encode the values you want to pass and pass them on a URL string with a get request.