Is it possible to determine if the user has selected a file for a particular input type="file" field using javascript/jQuery?
I have developed a custom fieldtype for ExpressionEngine (PHP-based CMS) that lets users upload and store their files on Amazon S3, but the most popular EE hosting service has set a max_file_uploads limit of 20. I'd like to allow the user to upload 20 files, edit the entry again to add 20 more, etc. Unfortunately upon editing the entry the initial 20 files have a "replace this image" file input field that appears to be knocking out the possibility of uploading new images. I'd like to remove any unused file input fields via javascript when the form is submitted.
Yes - you can read the value and even bind to the change event if you want.
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function()
{
$('#tester').change( function()
{
console.log( $(this).val() );
});
});
</script>
</head>
<body>
<input type="file" id="tester" />
</body>
</html>
But there are other, multiple-upload solutions that might suit your needs better, such as bpeterson76 posted.
This code will remove all the empty file inputs from the form and then submit it:
HTML:
<form action="#">
<input type="file" name="file1" /><br />
<input type="file" name="file2" /><br />
<input type="file" name="file3" /><br />
<input type="file" name="file4" /><br />
<input type="file" name="file5" /><br />
<input type="submit" value="Submit" />
</form>
JavaScript:
$(function() {
$("form").submit(function(){
$("input:file", this).filter(function(){
return ($(this).val().length == 0);
}).remove();
});
});
Example:
http://jsbin.com/axuka3/
This uploader has worked really well for my purposes: http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/
The benefit to using it as a basis for your coding is that the files are uploaded asynchronously, so no need to limit to 20 at a time. There's a definite UI benefit to doing the upload while the user is searching.
The resize is a pretty nice feature too, if you need it!
Related
I want to make a simple site that would let you browse for an mp3 and upload it automatically.
here is my code
<?php
if(isset($_POST['submit'])){
$file = $_FILES['mp3']['name'];
$tmp = $_FILES['mp3']['tmp_name'];
echo "$file";
move_uploaded_file($tmp, "member/mp3/".$file);
echo"Success";
}
?>
<html>
<form enctype="multipart/form-data" method="POST" action="upload.php">
<input type="file" name="mp3" /><br />
<input type="submit" name="submit" value="Upload" />
</form>
</html>
This code here is my original attempt however this still uses a manual form.
How can I make this upload automatically?
Maybe use something like this:
<input type="file" name="mp3" onchange="this.form.submit();" />
Although I don't condone inline event handlers, it's just an example to make sure it works for you. The point is to catch the onchange event of the file input and then submit its form. Instead of using this.form or whatever, you can grab the form by ID (after giving it one) and call submit() on it.
UPDATE:
To keep your existing PHP code working, give your submit button an id attribute (something other than "submit") and try using this:
<input type="file" name="mp3" onchange="document.getElementById('submit_button_id').click();" />
Again, this could be more maintainable/readable if you made it a function call, like:
<input type="file" name="mp3" onchange="submitForm();" />
<input type="submit" name="submit" id="submit_button_id" value="Upload" />
<script type="text/javascript">
function submitForm() {
// However you need to submit the form
document.getElementById("submit_button_id").click(); // Or whatever
}
</script>
If you would rather change the PHP, you can use the original this.form.submit(); (or just use .submit() on the form element in whatever way). In the PHP, what you really care for is to check if $_FILES['mp3'] is set, so it's up to you if you need to check for the submit button's presence. I forget exactly how isset() works, so I don't want to assume and tell you something wrong. You might be able to use other logic, but the real thing you care about is if the file was sent in the submission, even though it might make it "better" if you make sure a button was used to submit it (though not necessary).
Simple, attach a onchange() JS event to it.
<input type="file" name="mp3" onchange="call .submit() on a form"/><br />
This will submit the form when the user chooses a file. It's safer and more efficient to create these handlers in Jquery or a separate JS script. But for this example, it doesn't matter.
For more information, view this question: HTML <input type='file'> File Selection Event
I have the following problem:
On a website I'm coding for a client I have a form where you can upload images (up to 5, seperate file-input elements (so no problem caused by a flash / javascript solution)).
But sometimes the upload fails directly (nearly instantly the "Page cannot be displayed"-page is shown) or the request does not contain the files.
This is not an issue of file-size (as it happens sometimes, no matter if the files are larger (~2-3MB) or really small (150kB)) or request timeout (as the upload fails directly and not always - but too often ;-)).
Another weird thing: I tried to analyze the whole thing using Fiddler. But while using Fiddler the problem simply does not occur.
Any ideas?
Tested in IE9/10 on Win7/8
Chrome, FF etc. work fine, of course ;-)
/edit: I use a really simple test script (fails like the regular webapp)
<?='<!DOCTYPE html>'?>
<html>
<head>
<title>Upload Test</title>
</head>
<body>
<form action="http://www.site.com/upl-test/index.php" method="post" enctype="multipart/form-data">
<input type="file" name="img_file0" />
<input type="file" name="img_file1" />
<input type="file" name="img_file2" />
<input type="file" name="img_file3" />
<input type="file" name="img_file4" />
<input type="submit" name="submit_btn" value="Upload" />
</form>
<?php
if(!empty($_FILES)){
echo '<hr /><pre>';
var_dump($_FILES);
echo '</pre>';
}
?>
</body>
</html>
The structure looks like this:
<form>
...
some stuff
...
file select
...
some stuff
...
</form>
I need to send the input data from "file select" while not sending "some stuff" and as far as i've tried I couldn't get a form inside another form so that's not an option.
The way it works is like this: the file select control isn't displayed at first, clicking a button makes it show the control and some other stuff. I need a button to submit that file to be checked for different things (naming, size, etc) and uploaded to the server, without changing or reloading the rest of the window.
I could change the layout a bit and get the file select stuff out of the form but the boss doesn't want to change the design of the window and removing the outer-most form will be a lot of work as it's a very complicated part of the web site.
So, as the question says: Can I do it? Can I get the file trough javascript and send it to another php file for processing?
The most browser compatible way to achieve this is to use a hidden iframe that you submit the form into. For example:
<iframe name="my_iframe" id="my_iframe" style="display: none;"></iframe>
<form action="/next_step.php" method="post" target="my_iframe" entype="multipart/form-data">
<input type="file" name="file_upload" />
<input type="button" id="upload_btn" value="Upload file" />
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<input type="submit" value="Next step" />
</form>
<script type="text/javascript">
var btn = document.getElementById('upload_btn');
btn.onclick = function(){
var form_elem = document.forms[0];
// direct file uploads through the hidden iframe
form_elem.action = '/test_file.php';
form_elem.target = 'my_iframe';
// submit the form
form_elem.submit();
// now reset for next step in the form
form_elem.action = '/next_step.php';
form_elem.target = null;
};
</script>
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Ajax file upload
Is it possible to write an ajax request with JQuery that "submits" a form with a file field? I want to do it because in this way i can make the user upload a file without leaving the current page.
How should i write the $.ajax() call? and in particular how should i set into the ajax call the file field?
EDIT: I'd like to use only core JQuery functions, without plugins.
Thanks.
To maintain compatibility with the widest range of browsers this needs to be done through a hidden iframe.
Here is some sample code to demonstrate what I mean:
<iframe name="my_iframe" id="my_iframe" style="display: none;"></iframe>
<form action="/next_step.php" method="post" target="my_iframe" entype="multipart/form-data">
<input type="file" name="file_upload" />
<input type="button" id="upload_btn" value="Upload file" />
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<input type="submit" value="Next step" />
</form>
<script type="text/javascript">
var btn = document.getElementById('upload_btn');
btn.onclick = function(){
var form_elem = document.forms[0];
// direct file uploads through the hidden iframe
form_elem.action = '/test_file.php';
form_elem.target = 'my_iframe';
// submit the form
form_elem.submit();
};
</script>
There are projects out there that make this easier such as Plupload
It's hard. You're much better to use a service that already exists.
I did this recently on a site because I needed the whole form to submit without reloading the page, and uploadify was the best AJAX file uploader I found.
I have a form and a div. I want the user to select an text file and hit submit and that will populate the div with the content of the file. I would like to do that without having to refresh the page.
<form action="action.php" method="post" enctype="multipart/form-data">
Click the "Choose File" button and browse for the file to import.<br /><br />
<input type="file" name="filelocation" value="Browse" /><br />
<input type="submit" name="submitform" value="Submit" />
</form>
<div id="filecontent">
</div>
There is no easy way to submit/upload the files via ajax. However, you can go for the jQuery Uploadify plugin to the trick for you.
Uploadify is a jQuery plugin that
integrates a fully-customizable
multiple file upload utility on your
website. It uses a mixture of
Javascript, ActionScript, and any
server-side language to dynamically
create an instance over any DOM
element on a page.
Theres is no easy way to do that, but u can use an Iframe with an ajax call to get your file to the server and work with it the normal ajax way
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
File: <input name="myfile" type="file" />
<input type="submit" name="submitBtn" value="Upload" />
</form>
look at target="yourhiddeniframe"
here is a complete howto:
http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html
greetings