Develop Reference

In HTML, how can I build a file picker that can change the image displayed without using action listener?

This is what I have in HTML:
<img src="images/defaultProfile.jpg" id="image">
<input type="file" name="pic" accept="image/*" id="imgPath">
<input type="submit" onclick="uploadImg()">
The image with an id of "image" automatically loads a default image from a designated directory by default. Then, the user can I pick an image from the file picker. When the user hits the submit button written on the last line, The uploadImg() written on javaScript file will get the image from input and change the image displayed.
But, my question is how I can enable the user to change the image by just picking a image file from the directory without hitting the "submit" button.

You can add a change listener to the image input:
document.querySelector('#imgPath').onchange = () => {
console.log('Now uploading...');
// uploadImg();
};
<input type="file" name="pic" accept="image/*" id="imgPath">

Take a look at this Why can't I do <img src="C:/localfile.jpg">?. If your plan is to display an image before uploading to the server, that is not going to work. What you can do is write an "onchange" event (https://www.w3schools.com/jsref/event_onchange.asp) to your file selection input line (2nd line in your code), and upload it to a temporary directory and display it. As the user clicks on the upload button, you can make the change permanent. If the user cancels, you will display the default profile page.

jQuery form not sending data

I am trying to make it so when a file is submitted, a form gets submitted. Currently the form is submitting (the page refreshes), however the form data isn't being sent.
Javascript:
$(function () {
$("#moreHomepageImages").change(function () {
//I tried all of the following, all don't work
$("#imageHomepageForm").submit();
//$("#imageHomepageForm")[0].submit();
//document.getElementById("imageHomepageForm").submit();
});
)};
Html:
<form id="imageHomepageForm" name="imageHomepageForm" enctype="multipart/form-data" action="add" method="post">
<input type="hidden" name="object" value="homepage">
<input type="hidden" name="object_id" value="0">
<label>Add More Images</label>
<input id="moreHomepageImages" type="file" name="images[]" multiple="multiple"/>
</form>
On the add page, I have
print_r($_POST);
print_r($_GET);
print_r($_FILES);
and they print 3 empty arrays. I can't figure out why the form data isn't being sent along with the request? When I add a submit button into the form and click it, the data is sent as it is supposed to,
If it matters, the form is inside a jQuery Tab (http://jqueryui.com/tabs/)
EDIT: The action attribute is not the issue since it works if I use a normal input button and click it, I am using codeigniter so I do not need .php

The issue had nothing to do with jQuery or my code, for some reason the MAX_FILE_UPLOAD in my local php config wasn't reading properly and the images I tried uploaded where > 2MB (the default) breaking the request payload...
As to why submitting the form via clicking a submit button works and submitting over jQuery didn't is beyond me...

How to add image to multipart via javascript

I am implementing the dropzone.js file upload. However I do not want dropzone to handle the uploads because it seems like they go in bursts instead of all at once. I would like my photos to be uploaded at one time. To do so users will drag and drop photos into the dropzone area. From here they choose some custom options on the images. Then I would like a user to hit a custom button. This button can perform the following.
Add photos to multiImg[] array
invoke form
After a photo is uplaoded into the dropzone I will have access to all the information about the photo. Name, size, location(on uers computer). I am just unsure how to accomplish step 1 which is to take the photos and pass them into a form via javascript.
Is this even a good approach?
<form method="post" action="" enctype="multipart/form-data">
<input type="file" accept='image/*' name="multiImg[]" id="multiImg" />
Or possibly programatically appending
<input type="file" accept='image/*' name="Img" id="Img" />
Tags to the form and then submitting the form when done would be acceptable as well.
Can you dynamically add to the FileList for an input?

This got me closer to a solution.
xhr = new XMLHttpRequest();
formData = new FormData();
formData.append("" + paramNm + (this.uploadMult ? "[]" : ""), file, fileName);
xhr.send(formData);

How to reference to an uploaded img src in HTML

I am creating a responsive mobile website, and I want to be able to take and then upload a picture from the device. I have got this part working using
<form method="post" action="takephoto.php" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile" accept="image/*;capture=camera"/>
</form>
Now, what I am having trouble with is, after I have selected the picture that I want to use I do not know how to reference it later in my code. The reason I need to is I am using a .js library which allows me to upload a picture of a ISBN barcode and the .js file will read this file and spit out the ISBN as text which I will do more with later. (maybe link this to a Google Books API)
This is where I am getting the barcode scanner .js from: http://badassjs.com/post/654334959/barcode-scanning-in-javascript
I am relatively new to all of this, thanks for your help.

You will have to use ajax. This link contains some useful information for you.
Use ajax to get the picture uploaded and in the response, return the url or "failed". Then you can use in your js code,
if(response=="failed"){
//Handle upload failed
}
else {
//Handle url. Here response is your url actually.
// So to append the image to a given id, you would use,
$("#append_to_id").append("<img src='"+response+"'>");
}

Since the JavaScript library you are using is parsing an image on the page,
you have to show the image on the page after you have uploaded it.
So basically you need 4 steps to achieve this:
show an upload form (This is what you have done in the question);
grab the image uploaded in step 1 and save it to an accessible place
display the image on the screen
call get_barcode_from_image.js to parse it
Here's a piece of code for reference. It contains all the 4 steps above.
<?php
// step 2: save the image
if ($_FILES['myfile']['error'] == 0) {
move_uploaded_file($_FILES['myfile']['tmp_name'], 'u/barcode.jpg');
?>
<!-- step 3: show the image -->
<img src="u/barcode.jpg" id="barcode">
<script src="get_barcode_from_image.js"></script>
<div id="result"></div>
<!-- step 4: parse the barcode -->
<button onclick='document.getElementById("result").innerHTML = getBarcodeFromImage("barcode")'>scan</button>
<?php
}
?>
<!-- step 1: show the upload form -->
<form method="post" action="barcode.php" enctype="multipart/form-data">
<input type="hidden" name='a' value='b'/>
<input type="file" id="myfile" name="myfile" accept="image/*;capture=camera"/>
<input type="submit" value="submit" />
</form>
Of course you can use ajax or so to get better user experience, but the process won't change.

Upload an image and refresh div with new image

I have the following code
<div id=form>
<div id=viewimage>
<img src="placeholder.png">
</div>
<div id=upload>
<form action="upload.php" method=POST enctype="multipart/form-data">
<input type=file name=image>
<input type=submit value=Upload>
</form>
</div>
</div>
I need the image to be uploaded and then the #viewimage div to be refreshed with the submitted picture. When the form submits, the upload.php will return a file name of the uploaded file. I think this is an ajax question, but im a complete noob when it comes to ajax/javascript, so i dont have the slightest idea how to proceed.

If you want do do it in ajax, you should put your form inside an iframe, so when you upload the image, only a small part of the page (the form) is sent to your server.
After that, you can use upload.php response to get the name and path of uploaded image, and then you can just change the src of the img tag.