I was wondering if anyone knew the best way to dynamically create an upload form?
Here's what I'm trying to achieve: The code shown below allows one upload, I want to have a button that when pressed, should add another form for file upload. So, if I want to upload - let's say 7 files, I want to press the button 7 times to create those upload forms, each on it's own row.
Is there anyway I can do it?
Thanks for your assistance:
<html>
<head>
<title> Multiple File Uploads </title>
</head>
<body>
<form enctype="multipart/form-data" action="uploader.php" method="POST">
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
Usually you do something like this, Client-side:
<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload'>Add another field</button>
<script type='text/javascript'>
$('#extraUpload').click(function(){
$('.uploadfile:last').clone().appendTo('#uploadContainer');
});
</script>
That is using jQuery. Then on the server side you can easy loop over the $_FILES['uploadfiles'] array:
foreach($_FILES['uploadfiles'] as $file){
//do stuff with $file
}
take a look here for a simple example
http://mohamedshaiful.googlepages.com/add_remove_form.htm
Josh
jQuery has a nice plugin I've used called MultiFile. You may want to check that out.
http://www.fyneworks.com/jquery/multiple-file-upload/
Here's a really really simple one, works in FireFox, Chrome and IE7.
I'd really advise you to check out a javascript framework such as jQuery, it'll make your life easier.
<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload' onclick="return addAnother('Uploadcontainer')">Add another field</button>
<script type='text/javascript'>
function addAnother(hookID)
{
var hook = document.getElementById(hookID);
var el = document.createElement('input');
el.className = 'uploadfile';
el.setAttribute('type','file');
el.setAttribute('name','uploadfiles[]');
hook.appendChild(el);
return false;
}
You could try this jQuery plugin called uploadify
You could try YUI uploader
Just make sure that you handle the file correctly on the server as Flash sometimes posts the data to the server in different ways. So if you have some way of checking what is in the Request values then you should be good.
There is no way to do this with plain HTML currently. I think it is starting to be addressed in the latest versions of browsers and the forthcoming HTML5 spec.
Most current cross browser solutions will require a JS library (and I think Flash). The alternative is selecting each file individually with it's own input element. For obvious reasons browsers implement very strict security around the scripting and display of file upload elements that can make them hard to work with.
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
My question is should I convert two html pages to php pages, so the called page can access its POSTed parameters, or is there a way for a called html (.html extension) page to access posted parameters?
I've been reading that because posted parameters are server-side there is no way for JavaScript to do this being client side. I've seen nothing about one html page accessing
parameters if that .html page was accessed via a POST.
Here is my calling form. The called form, needs access to TransDesc (below), which is a text field.
<script type="text/javascript" language="JavaScript1.2">
// Check where we came from so that we can go to the right spot when the
// form gets posted from outside of our HTML tree.
var PostURL = '/event.html';
</script>
Enter a Donation Amount
<script type="text/javascript" language="JavaScript1.2">
document.write(
'<form name="InvGenPayDonation"
action="'+PostURL+'"
onsubmit="return validateForm();"
method=POST>');
</script>
<p> $ <input type='text' name='Amount' value="0.00">
</p>
<p>In honor of <span style="color: #FF0000">
<input type='text' name='TransDesc' id='TransDesc' value="" >
</p>
<input type="submit" value="Next"> <br /><br />
A static HTML file cannot access variables that have been POST'ed to it. It can't even know they're there as they're sent to the server in the HTTP request, the server then deals with them and sends the HTML page in the HTTP response. They're 'consumed' before the page is even sent to the client.
You could use GET and access them via JavaScript, or configure Apache to server .html files as PHP files instead though.
In my opinion, php is the easiest way to go, and as far as languages go is pretty easy to learn and pretty intuitive.
You'll have to either convert them to PHP or use GET instead of POST, as GET parameters are accessible through window.location.href
Yes, I would recommend converting the pages to php. If you are set on using HTML files you will have to edit your htaccess file to run HTML pages as php.
You can always use ajax to retrieve and send post and get values.
You can retrieve it with js by creating a php file and access those with ajax from your html files.
I've never met such approach before, but I'm wondering why nothing happens after clicking the "Say hello" button.
<html>
<head>
</head>
<body>
<button onclick="myscript.php">Say hello</button>
</body>
</html>
<?php
echo "Hello";
?>
It would look very "bombastic" if I used the "form" markup construction in this case.
Could you point out my mistake? Or if my vision is totally hopeless, what are the unconventional ways to run the php script?
Why are you using onclick? onclick executes javascript code.
Just link to the file
Say Hello
If you must use javascript, you have to redirect to that page using something like window.location
Here's a tutorial on redirecting with javascript
Because onclick events evaluate JScript or JavaScript code, not file name.
http://www.w3schools.com/jsref/event_onclick.asp
onclick is a so called Event-Property. That expects javascript code by default.
this example is equivalent to including a js file with the content
test.php
that would raise an error as there is no object called test... You could put it in quotes which would make it a string and solve the problem... at least no error would be raised.
But back to your question: You don't launch a php script do you? with
<form method=GET action="scriptname.php">
<input type="text" name="name" />
<input type="submit" value="submit" />
</form>
you tell your browser to open a php-file with additional informations from the form.
It is of course possible to communicate with a php file in the background, search for ajax in order to do that.
I have created a page to upload a file (single) to my server :
<form action="<?php echo $_SERVER['PHP_SELF'];?>?e_name=<?php echo $_GET['e_name']; ?>" method="post" enctype="multipart/form-data">
<input type="file" id="upload-video" name="userfile" onchange="handleFiles(this.files)" class="input"/>
<div>
<input type="submit" name="submit" value="העלה" class="button"/>
</div>
</form>
and i was wondering how i could add a progress bar to it.
i have noticed that in chrome you can see the upload percentage and wanted to know if there is a way to use that information.
if not, what is a good way to do this?
i have been looking around but always seem to get confused with what i find, if someone could explain it simply that would be grate.
thank you very much.
I've been using a jQuery plugin to do all my file uploads, seems quicker than trying to reinvent the wheel. It includes the form plus the progressbar and hints on how to process on the backend. Plus, they've done all the bugchecking for you.
Jquery File Upload Plugin
check this example , this do what you want
I'm trying to use YUI uploader, but I'm not able to open the file dialog window when I click the browse button. I'm following (more or less) the example on Yahoos demo.
Here is my HTML code:
<div id="fileProgress">
<input id="fileName" type="text" size="40" />
<input id="uploaderUI" name="uploaderUI" class="submitButton" type="button" value="Browse" />
<input id="uploadFile" name="uploadFile" class="submitButton" type="button" value="Upload" />
<div id="progressBar"></div>
</div>
And here is my javasctips code:
jQuery(document).ready(function() {
initYUIUpload();
});
function initYUIUpload()
{
YAHOO.widget.Uploader.SWFURL = "wp-includes/js/yui/assets/uploader.swf";
var uploader = new YAHOO.widget.Uploader("uploaderUI");
uploader.addListener('contentReady', handleContentReady);
uploader.addListener('fileSelect',onFileSelect)
uploader.addListener('uploadStart',onUploadStart);
uploader.addListener('uploadProgress',onUploadProgress);
uploader.addListener('uploadCancel',onUploadCancel);
uploader.addListener('uploadComplete',onUploadComplete);
uploader.addListener('uploadCompleteData',onUploadResponse);
uploader.addListener('uploadError', onUploadError);
jQuery('#uploadFile').click(function(){ upload() });
}
UPDATE
I "gave up" using YUI uploader, and I'm using Uploadify now.
I had this exact same problem.
There is a bug with the 2.8 version of uploader.swf
If you had the same problem as me, than switching to the 2.7 version of uploader.swf will make your events fire as expected.
I think it might have something to do with this note from the YUI Uploader page:
Because of security changes in the upcoming Flash Player 10, the UI for invoking the "Browse" dialog has to be contained within the Flash player. Because of that, this new version of the Uploader is NOT BACKWARDS COMPATIBLE with the code written to work with the previous version (it is, however, compatible with Flash Player 9). Do not upgrade to this version without carefully reading the documentation and reviewing the new examples.
This means instead of calling your upload function directly from the <input> button, you have to create another <div> which will contain the transparent Flash overlay created by YUI uploader.
See the example from the YUI site:
<div id="uiElements" style="display:inline;">
<div id="uploaderContainer">
<div id="uploaderOverlay" style="position:absolute; z-index:2"></div>
<div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div>
</div>
<div id="uploadFilesLink"><a id="uploadLink" onClick="upload(); return false;" href="#">Upload Files</a></div>
</div>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var uiLayer = YAHOO.util.Dom.getRegion('selectLink');
var overlay = YAHOO.util.Dom.get('uploaderOverlay');
YAHOO.util.Dom.setStyle(overlay, 'width', uiLayer.right-uiLayer.left + "px");
YAHOO.util.Dom.setStyle(overlay, 'height', uiLayer.bottom-uiLayer.top + "px");
});
</script>
ok normally when happend that the concern is about the swf file, cause is this file who open the dialog not JAVASCRIPT, so you have to download the file and put in you server you can't access directly in the yahoo site.
also you can use this dependency
best
Nahum
PS. My first time using yui upload had the same problem.