Develop Reference

How to upload image and receive data input in nodejs?

I use mutter and body-parser to upload image and transfer file type multipart/form-data.
I have a form to upload and save name image to database, i want when not choose file in form , i still receive data of text input another.
This is my form :
<form action="/upload?_csrf=<%= csrf %>" method="POST" enctype="multipart/form-data">
<input type="file" name="file" size="50" />
<input type="text" name="name" />
<input type="submit" value="Save"> </form>

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.

How can i upload preview images?

In my HTML form I have input filed with type file.
for example :
<input name="txt_file" type="file" id="txt_file" multiple>
I use code in this link here is the fiddle:
http://jsfiddle.net/L45LW/5/
How can i upload all image with javascript?
I want to store images info into array to send other page with POST in javascript.
Please help me

Not very clear what are you asking for! But at least you should have enctype="multipart/form-data" in your form tag to upload files.
<form id="form1" method="post" enctype="multipart/form-data">
<input name="txt_file" type="file" id="txt_file" multiple/>
<input type="submit" value="Upload" />
</form>

How to access information in a javascript file that was send from a form?

I have this following code:
<form action="main.js">
<input type="text" required="required" pattern="[a-zA-Z]+" />
<input type="submit" value="Submit" />
</form>
When i click the submit button, the information that was in the input should be sent to my file "main.js". But there is nothing in "main.js". I want that "main.js" file would contain that passed information as a string, is there a way or method to do this?

Seems like you've understood form action incorrectly.
Action defines which code will handle your form values, and not which page will the results be pasted into.
you'll want main.js to receive the form results and handle them in a way to be pasted into a results.txt file for example. But allowing a user of your website to create or edit files on your server is insecure.
The only option i think of, unless you have access to server side coding, like php or asp, is sending the submitted form information to your email using mailto:
<!DOCTYPE html>
<html>
<body>
<h2>Send e-mail to someone#example.com:</h2>
<form action="MAILTO:someone#example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
can you run asp or php?

Following could be the part of your javascript file.. If you are not going to include any JS file then you can use it directly.
function checkAge() {
var x = document.forms["Form1"]["Age"].value;
if (x == null || x == "") {
alert("Age is empty");
return false;
}
else
alert(x);
}
Then your form should looks like
<form name="Form1" action="abc.jsp" onsubmit="return checkAge()" method="post">
Age: <input type="text" name="Age">
<input type="submit" value="Submit">
</form>
Cross check with your form and see what went wrong..

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.