So before I get started, I will let you know that I have read this question and mine is similar. Basically, i need to be able to have the user upload a file from the computer or take a picture from the webcam, put the photo on a canvas and upload that. Is there a way to change the source of a using javascript (I want to change the file source to the to the dataURL)? Here is what I have so far.
In the main html page:
<form name="uploadFile" action="upload.php" method="post" enctype="multipart/form-data" onSubmit="return validate();">
<input type="file" id="imageupload" name="ufile" onKeyPress="return false;">(* jpg,png)
</form>
And in a seperate JS file I have:
button2.addEventListener('click', function(){
imgdata=canvas.toDataURL('image/png');
$("#imageupload").attr("src", imgdata);
});
This code does do what is supposed to (it changes the attribute of #imageupload) but that is how to change the source of the file.
Any help would be appreciated!
Related
I'm currently doing some web development work and my assignment requires me to upload a file to a server. I have the following code:
<form id = "uploadbanner" method = "post">
<input id = "fileupload" type = "file" />
</form>
I don't have a submit button, since there's already one at the bottom of the page. Whenever I test out the code and input a file x, it tells me that it cannot find x. I've tried seeing if I could obtain the path name from the client to see if this was the issue, but that isn't allowed due to security reasons. Any help would be appreciated; thanks!
This could help:
<form action="upload.php" method="post" enctype="multipart/form-data">
Select file to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload File" name="submit">
</form>
In order to achieve the upload, you must:
add an action to your form
use name instead of id in order to read the file, check this: HTML input - name vs. id
Don't forget to link your submit button to the form and you're good to go.
I have an element like this:
<input type="file" accept="image/*" id="fileAdd" name="image" size="30" />
How can I save the selected image in a folder inside the project?
You have to send your form values to .php file.
Look for "move_uploaded_file()" function in php or another example (there's a lot of it on stackoverflow)
I have a simple HTML form that I am building. I want to be able to added multiple files to submit with the form to upload. Everything I am reading online about HTML5 says that I am able to do this with the HTML5 Input Multiple tag. When I try this in any browser I get the standard Input with a type of file. When I inspect the DOM i see that it has only a single file in it's Files[0] attribute. Here is my form. Please let me know what I am doing wrong.
Here is my HTML for the the form for uploading files:
<form method="post" action=upload.php" enctype="multipart/form-data">
<input type="file" id="basicUploadFile" multiple >
</form>
Also. I have tried this in Chrome, Firefox, IE 11. Even going to the W3school.com demo doesn't seem to work in any of them for multiple files.
files[0] will show you the first file selected. files gives you a collection of the selected files, files.length gives you the number of files selected. So once you select more than one file if you console.log(fileinput.files) you'll see multiple files logged.
<form method="post" action="upload.php" enctype="multipart/form-data">
<input type="file" id="UploadedFiles" name="UploadedFiles[]" multiple>
<input type="submit" value="SendFile">
</form>
in upload.php analize structure of array $_FILES ;)
good like!
Is that a typo? There is a " missing before the upload.php
your form tag looks correct
http://en.wikipedia.org/wiki/File_select#Multiple_file_selection
[edit]
If you are referring to the W3schools site, this works for me on Chrome and IE
http://www.w3schools.com/tags/att_input_multiple.asp
TryIt site:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_multiple
I have a form in my webpage,
The form uploads a file to my server.
currently when the file upload form submits, after the server side finishes saving the image it tries to redirect my webpage to a different page :( (the name of the form action)
is there a way to execute the form without the redirect part? like an ajax call for uploading my image?
thanks.
here is the form:
<form method="POST" action="/project/upload"
enctype="multipart/form-data">
Please select a file to upload : <input type="file" name="file" />
<input type="submit" value="upload" />
</form>
EDIT - Let me try to rephrase it:
is it possible to submita form in such a way that it wont change my page or redirect?
and is it possible to create a call back when it finishes?
You can use target="iframeName" on your form to get it to post to an iframe on the page with no reloads occuring. Something a little like this:
<form method="POST" action="/project/upload"
enctype="multipart/form-data" target="myFrame">
..Form content..
</form>
<iframe name="myFrame" height=0 width=0></iframe>
Think best way is using a php page which calls itself with no redirect:
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
....
</form>
So you call the same page to do upload and don't need redirect. In other way you can add header in php page "/project/upload" with automatic redirect to put after upload code:
header("location: yourpage.html");
Ok I really didn't know how else to sum it up for the title. I need to create a form where a user can specify an existing file, but I don't need to upload it (it's on a shared server already accessible) -- I just need to grab the filename and save it in the database so it's linked to other data.
I thought about the input tag as it provides a convenient already done interface to the user's filesystem, but I don't know if it's possible to use it without the acutal upload (leaving out enctype="multipart/form-data" doesn't seem to work). Can I tweak this to make it work, or is there any way to do it other than writing a custom mini file browser?
EDIT: I need the full path name of the file, asking the users to enter it is out of the question...
You could place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>