I want to store/copy file into folder using JavaScript. file is getting from input type file. .
JavaScript Code -
function submitForm(action)
{
// here I want to do copy file into folder
}
HTML Code-
<form id="exampleForm" method="post" action="" enctype="multipart/form-data" >
<input type="file" class="upload" name="imagename" id="imagename" />
<input type="button" name="save_exit" id="save_exit" onclick="submitForm('add_question_sql.php')" value="Save & Exit" />
</form>
I can not use Submit button for some reason.
So how can I copy a file into folder using JavaScript ?
As commented by Paulo, this is not a JavaScript topic. On selection of a file and submission of the form, your server-side application will receive the request and will be in a position to receive the uploaded file and store it somewhere on your server.
Since javascript is Client-side language . so its not possible using javascript.
U have to use any backend technology. like php, java, node.
Related
<div class="fileupload">
<button class="button">+</button>
<input type="file" name="myfile" id="filebutton"
accept="image/png" enctype="multipart/form-data"/>
</div>
What attribute should I add in my code in order to choose where the file uploaded by the user is saved in the code folder.
Following this tutorial, using PHP you can do this :
$dest=__DIR__.'/uploads/'.$upload_file_name;
and replace the path by whatever you want.
(this code comes from The complete PHP script so far section)
I am using dropzone.js as per my requirement.
I want to use div as file upload control like when user drag & drop a file in the div it should show uploaded files and when user click "submit" button , it should go to server, next other stuff.
But here I am facing problem like, with Form only it is working, when i am uploading a file it is directly going to server with file, i have written like
<form action="~/Employer/GetFile" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm" style="width: 50px; background: none; border: none;">
<div class="fallback">
<input name="file" type="file" />
<input type="submit" value="Upload" />
</div>
</form> // Working Fine ,
<div class="watermark pull-left margin-top-1 dropzone" id="divDropFile"></div> // Not wroking,
it should upload file(s) only like dropzone.js without destination urls, it should go to server when click on file upload button only. Moreover, file drop is not working.
Please help me anyone.. if it is not possible without form submit, please give any suggestion for alternative solution.
I am not on my development computer so I can't try it out, but there are two things that might help.
1) The div that you want to serve as the dropzone hot spot should not have the class dropzone. It needs the class dz-message. Write it like this:
<div class="watermark pull-left margin-top-1 dz-message" id="divDropFile" data-dz-message></div>
2) If you don't want it to automatically send the file to the server, you need to add autoProcessQueue = false in your Dropzone.options object. You will then need to manually call myDropzone.processQueue() later to upload the files.
This question already has answers here:
HTML5 AJAX Multiple Files Upload
(1 answer)
How can I upload files asynchronously with jQuery?
(34 answers)
Closed 8 years ago.
Does anyone know how to manage the <input type="file" id="myFile" /> in javascript so I can send the file to a php code?
I have something like this:
<input type="file" id="myFile" />
<input type="button" value="FILE" onclick="useFile()" />
Then, in javascript I want to use the file the user uploaded because I want to use it in a PHP code.
How do I get the file and send it to php as a parameter?
function useFile() {
var myFile = document.getElementById("myFile"); //Does this work?
// then how do I send it to a php?
}
I hope someone could help me.
Thanks a lot.
Can you submit the form? If so, it's very simple. Here's the HTML:
<form method="post" action="myScript.php"> <!-- Make a form tag that sends the input (using post) to your PHP script -->
<input type="file" id="myFile" /> <!-- As you had above -->
<input type="submit"/> <!-- create a submit button that, when clicked, will send the file to the server and redirect the page to myScript.php -->
</form>
If you're not sure what post is, check out this site: http://www.restapitutorial.com/ and read this document: http://www.mediafire.com/view/6hmhaygp099gfdh/RESTful_Best_Practices-v1_1.pdf .
However, if you can't submit the form, you can get the file by registering an onchange handler in JavaScript. Check out this answer for more info: how to get files from <input type='file' .../> (Indirect) with javascript .
Do you have JQuery on your project? It makes it easy to send files via POST to your server. Read more about it here: http://api.jquery.com/jquery.post/ .
If you don't have JQuery you can use XMLHTTPRequest to send a post. This page has some good information on how to do it: http://www.openjs.com/articles/ajax_xmlhttp_using_post.php and here are the docs for XMLHTTPRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
I hope that helps!
I use this upload form all of the time and use the same file name each time.
I wonder if there is a way to set the file name in a form by changing the code and saving the file locally. If there other ways to automate this I'd be open to that too. Thanks.
Here is the source:
<html>
<body>
<form enctype="multipart/form-data" action="mibdata.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
Choose a file to upload: <input name="uploadedfile" type="file"/><br />
<input type="submit" value="Upload File" />
</body>
</html>
PHP Code: (in mibdata.php)
$target_path = "/path/to/save/file/filename.ext";
if(isset($_FILES['uploadedfile'])){
move_uploaded_file($_FILES['uploadedfile']['tmp_name'],$target_path);
}
Make sure that the target_path is writable by server.
You'll also have to use something like PHP as a Script so you can move your uploaded file from the Webserver's temp-directory to somewhere where it can be saved persistent.
Look at this Tutorial for example.
I need to obtain the String for the file that is being uploaded from forms to store in the database.
I am using the usual form input file element
input type="file" name="some_name"
I found a couple JS scripts that allow me to do useless things like display the string in a dialog box, etc.
I need this as an element on the request object or as a hidden field on my page when the form is posted.
You should be able to do something like this:
<form method="POST">
<input type="file" name="some_name"
onchange="document.getElementById('hidden_file').value = this.value;" />
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
I believe that will work in all browsers if you simply want to store the filename, and not the full path.
You won't get a very useful value. Some browsers will only give you the final name part of the file path, while IE will give you a path with a bogus directory name.
I think that the "safe" fragment of the file name should already be passed in to you as part of the part header in the multipart post body.