I have upload file example like this :
<form id="form" action="http://example.com">
<input type="file" id="file">
</form>
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
}
Now, I do not want to select file,I want it auto, I have the file location like this.
D:\test\test.doc
Can jquery auto select file in a path before submit ?
If this could be done, than anyone could steal your files using simple script.
Related
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.
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.
I'm using an icon instead of the regular upload input + submit button.
I want the upload to starts automatically right after a file is chosen.
Once the user selects a file, nothing happens though.
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input id="upload" type="file" name="image" style="display:none" value=/>
<input name="wishid" type="hidden" value=/>
<img id="upload_img" src="/images/upload.png">
</form>
<script type="text/javascript">
$('#upload_img').click(function(){
$('#upload').click();
});
</script>
What do I need to add to the jQuery code to actually start the upload process via upload.php ?
Take a look at this description of how to replace input:file with image and then you can just use the code below...
<script type="text/javascript">
$('#upload_img').click(function(){
$('form').submit();
});
</script>
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've a form as
<form onSubmit="return disableForm(this);" action="upload.php" method="post" name="f" id="wizecho" enctype="multipart/form-data">
<input type="file" name="file" />
<button onClick="return disableForm(this),ajaxUpload(this.form,'wizecho_upload.php', '<br>Uploading image please wait.....<br>'); return false;">
Upload Image
</button>
</form>
It is to upload an image.
Here I need to click on the button to upload the image and I've to use onClick event. I want to remove the upload button and as soon as the file is selected at the input, I want to fire the event. How do I do that??
Use the change event on the file input.
$("#file").change(function(){
//submit the form here
});
You could subscribe for the onchange event on the input field:
<input type="file" id="file" name="file" />
and then:
document.getElementById('file').onchange = function() {
// fire the upload here
};
This is an older question that needs a newer answer that will address #Christopher Thomas's concern above in the accept answer's comments. If you don't navigate away from the page and then select the file a second time, you need to clear the value when you click or do a touchstart(for mobile). The below will work even when you navigate away from the page and uses jquery:
//the HTML
<input type="file" id="file" name="file" />
//the JavaScript
/*resets the value to address navigating away from the page
and choosing to upload the same file */
$('#file').on('click touchstart' , function(){
$(this).val('');
});
//Trigger now when you have selected any file
$("#file").change(function(e) {
//do whatever you want here
});
vanilla js using es6
document.querySelector('input[name="file"]').addEventListener('change', (e) => {
const file = e.target.files[0];
// todo: use file pointer
});
Solution for vue users, solving problem when you upload same file multiple times and #change event is not triggering:
<input
ref="fileInput"
type="file"
#click="onClick"
/>
methods: {
onClick() {
this.$refs.fileInput.value = ''
// further logic for file...
}
}
Do whatever you want to do after the file loads successfully.just after the completion of your file processing set the value of file control to blank string.so the .change() will always be called even the file name changes or not. like for example you can do this thing and worked for me like charm
$('#myFile').change(function () {
LoadFile("myFile");//function to do processing of file.
$('#myFile').val('');// set the value to empty of myfile control.
});
<input id="fusk" type="file" name="upload" style="display: none;"
onChange=" document.getElementById('myForm').submit();"
>
<input type="file" #change="onFileChange" class="input upload-input" ref="inputFile"/>
onFileChange(e) {
//upload file and then delete it from input
self.$refs.inputFile.value = ''
}