Develop Reference

Send file data to server as multipart form data

I have a file input element outside the form. and on form submit i want to send the file content to server as multipart form data. I can't insert the file element into the form. Is there any other way to do this.
<input type="file" class="file" style="width:117px" name="c2vFile" onchange="onFileChange2(this.value);"/>
<form style="display:none" id="frmActivate" enctype="multipart/form-data">
<input type="hidden" id="act_groupActivationJson" name="groupActivationJson" />
<input type="hidden" id="act_remarks" name="comments" />
<input type="hidden" id="activatee" name="activatee" />
</form>

The file input needs to be inside the form tag. You've mentioned you can't, but why not? You would need to remove the "display:none", which serves no purpose currently, as the inputs are all hidden.

You can send a file outside of form tag using AJAX submission. You can follow the below link will helpful for sending file using ajax.
But you have have to invoke this function on click of submit button. Once the file upload done then form submit should be happen.
jQuery Ajax File Upload

I did a small trick with this and it worked, please review if it is helpful for you
Before submitting the form add listener and append the input field with the form.
document.getElementById('frmActivate').addEventListener("submit", function() {
var fileinput = document.getElementById('filein');//take the file input
var thisel = document.getElementById('frmActivate');// take the form element
var cln = fileinput.cloneNode(true);//clone the file input element
thisel.appendChild(cln);//append the clone in the form element
thisel.submit();
})
<input type="file" id="filein" class="file" style="width: 117px" name="c2vFile" onchange="onFileChange2(this.value);" />
<form style="" id="frmActivate" enctype="multipart/form-data">
<input type="hidden" id="act_groupActivationJson" name="groupActivationJson" />
<input type="hidden" id="act_remarks" name="comments" />
<input type="hidden" id="activatee" name="activatee" />
<input type="submit" value="submit" />
</form>
<?php var_dump($_FILES);//to confirm if file is submitted ?>
You can see this code working in this demo
Hope this works for you.

Firefox for Android input file onchange doesn't trigger when using camera

I am making a single picture form that should auto upload when the image is selected.
HTML
<form method="post" action="{{ bucket }}" enctype="multipart/form-data" id="pic-form">
<label>
<img src="placeholder.png" class="photo"/>
<input type="file" name="file" required id="pic-file" accept="image/"/>
</label>
<input type="submit" value="Upload" id="submit-btn"/>
</form>
JS:
$('#pic-file').on('change', function(evt){
$('#pic-form').submit();
});
It works fine on desktop, and on my phone it also triggers when I select a picture from my library but not when I select from camera.

I had a bug on the accept parameter. In my actual code I had "image/;capture=camera" where the HTML spec says it is a comma separated list. I had to change to "image/,capture=camera". At the end I ended up with this:
<input type="file" name="file"
required id="pic-file" accept=".jpg,.jpeg,.png,capture=camera"/>

Closed - How can I create a new input file when the first input file has a file selected?

Edit:
I'll just use the attribute multiply, my problem is that is not supported in IE9 or earlier, but meh, that's the way it's going to be
Thanks everyone
I'm inserting data to a database, and for every entry I can have an unknown number of photos uploaded (maybe max 4) for that entry.
My question is: When I select a file in this form I want to make another input file appear to upload another file
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="photos[]"><br>
<!-- ######## more data entries ######## -->
<input type="submit" name="submit">
</form>
I tried using jQuery like this:
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="fotos[]"><br>
<div id="placeholder"></div>
<script>
$('input[type=file]').change(function(){
$('#placeholder').html('<input type="file" name="fotos[]"><br>');
});
</script>
<input type="submit" name="submit">
</form>
but it only works for the first input
Is there another way to do this? i know there is multiply='multiply' but I'm not sure if it's well supported
Thanks in advance
PS: I don't care much what language to use as I know a little about everything, just go slowly on me :)

How to upload pictures to jCrop?

I've used the codes I've found from here: http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail, but there isn't an upload function. How do I add that?
Like if I use this function how can I implement jCrop?
<form enctype="multipart/form-data" action="save.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" /> </form>

You don't upload images to jCrop, you apply jCrop to your image element.
$(function(){ $('#id_of_your_image_element').Jcrop(); });
replace id_of_your_image_element with the id of your image tag, if you don't have an id on that tag, add one.

Accessing the file from a form with a input file element

I want to access a file(e.g. image) using JavaScript with such a form:
<form id="form" enctype="multipart/form-data">
<input type="file" size="40" value="" id="upload" name="upload"/>
<input type="submit" id="submit" name="submit"/>
</form>
Is there a way to do it? I am trying to load a image specified by the client into a html5 cavas element without sending it back to the server.

http://www.matlus.com/html5-file-upload-with-progress/
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
hope this help.