How to Make a Simple Image Upload Using JavaScript/Html

Javascript image upload and display

You may want to checkout this solution (where my code derives from). It involves a little bit of jQuery but if you truly must write it out in pure JS, here you go.

Note: I modified your tags to conform to the JS below. Also try to stay away from writing any inline scripts. Always good to keep your HTML and JS loosely coupled.

var fileTag = document.getElementById("filetag"),    preview = document.getElementById("preview");    fileTag.addEventListener("change", function() {  changeImage(this);});
function changeImage(input) {  var reader;
  if (input.files && input.files[0]) {    reader = new FileReader();
    reader.onload = function(e) {      preview.setAttribute('src', e.target.result);    }
    reader.readAsDataURL(input.files[0]);  }}

<input type="file" id="filetag"><img src="" id="preview">

How to upload image in web page using Javascript?

I think there is a mismatch in the IDs you use in HTML elements and JS Code.

function upload(){
  var dd=document.getElementById('can');
  var filein=document.getElementById('finp');
  var img = new SimpleImage(filein);
  img.drawTo(dd);
}

function docolor(){
  var dd1=document.getElementById("can2");
  var colin=document.getElementById("clr");
  var col=colin.value;
  dd1.style.backgroundColor=col;
}

<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js" ></script>

<canvas id='can' class='canvasRoundCorders'></canvas>
<input id='finp' type='file' accept='image/*' onchange="upload()">

How to upload and preview 2 images in JavaScript

In JavaScript file you are using document.querySelector("")

That chooses only the first element in the HTML and you can't duplicate the two uploader and use the same selector in JavaScript.

You can with JavaScript select the two uploader & make the functions for the two uploaders with loop as an example.

If you need array of the elements you can use document.querySelectorAll("").

Upload image using javascript

The reason that im.fileSize is only working in IE is because ".fileSize" is only an IE property. Since you have code that works in IE, I would do a check for the browser and render your current code for IE and try something like this for other browsers.

var imgFile = document.getElementById('submitfile');
if (imgFile.files && imgFile.files[0]) {
    var width;
    var height;
    var fileSize;
    var reader = new FileReader();
    reader.onload = function(event) {
        var dataUri = event.target.result,
        img = document.createElement("img");
        img.src = dataUri;
        width = img.width;
        height = img.height;
        fileSize = imgFile.files[0].size;
        alert(width);
        alert(height);
        alert(fileSize);
   };
   reader.onerror = function(event) {
       console.error("File could not be read! Code " + event.target.error.code);
   };
   reader.readAsDataURL(imgFile.files[0]);
}

I haven't tested this code but it should work as long as I don't have some typo. For a better understanding of what I am doing here check out this link.

Preview an image before it is uploaded

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>