I'm using a small site to experiment with the uploading of pictures and displaying them.
When someone clicks "add a picture", they get taken to a page with a form on it. They can select a file and click the submit button.
But what I want to do now is this: put a second submit button labeled "Cancel" next to the normal confirmation button. If someone then chooses to upload, selects and hits submit, if they press the cancel button before the file is fully uploaded, PHP should stop the uploading of the file and delete it. And then just go back to the overview.
No Javascript used whatsoever.
I only have localhost, so testing this in kindof impossible, since I just copy a file the millisecond I press the submit button. There's no upload-time with a localhost and I'm not going to buy a server somewhere just for this.
Basically what's happening now is that the PHP detects which button was sent. If the submit button was sent, the file is uploaded, if the cancel button is sent, it just goes back to the overview.
But PHP does its tasks one in a row. So I don't think this will work. How do I tell PHP to stop doing the upload?
You can't look at the button with php - the whole request will have been sent before PHP gets that information.
What you could do is put the cancel button in a different <form>, like this:
<form> <input type="file> <input type="submit" value="upload"> </form>
<form> <input type="submit" value="cancel"> </form>
(This is just an example of course - there's bits missing).
When they click cancel, the browser should abandon its request and start a new one, cancelling the upload.
Greg has the right idea there.
In stead of following the majority, or looking at how things are done, look at smart alternatives, like Greg's explanation above.
Any upload cannot function without a valid link between the client and the server; hence if you close your browser window, or re-direct it to some place else, the upload is killed.
use an iframe and name it eg.: "myframe". you can easily hide it in a div. have a form with your action="somefile.php" and target="myframe". add a lil Javascript to your form's "file" field: onFocus="uploadlistener()". you can name this function anything you like, but use it to check if the person "opened" anything. the browser will automatically swap focus, whether, the user clicked "browse", or if he then opened a file. difference is, after a file has been "selected", the input field receives the focus again, but remember you have a listener on the "onFocus()" event. so: if the field is not empty, call: document.uploadform.submit()
Using this method, you don't even need a submit button. if you want to skin your "browse" button, just make it transparent using CSS, eg:
input name="myfile" type="file" style="width: 40px; -moz-opacity: 0; filter: alpha(opacity=0)" onFocus="somefunction()"
Well to cancel upload just redirect the iframe to some other place, eg:
input type="button" value="cancel" onClick="document.uploadform.action='blank.php'; document.uploadform.submit()"
Pardon if the html above spans across multiple lines, it's the first time I'm posting here.
To track progress, you need to add a server side listener, either with PHP-5.2, or some Perl script to check how many bytes have been loaded thus far of the total file size checked before upload was started. this check interval can be achived with some AJAX, or if you don't know the term, look up: HTTP-REQUEST. this runs server side code in the background and outputs a response like you would see in the browser, but here you can capture it in a variable, and do your stuff. I hope this was helpful to anyone.
There's no way for PHP to stop a file upload in progress. Your PHP code isn't even started until the file upload is done, so by the time it's running, it's too late.
If it indeed turns out that cancelling the upload is not possible, you might consider implementing an easy to use undo or delete function, so that users can immediately undo the uploading of the image (i.e. the image is deleted). This may not be useful in your experiment, but perhaps you can use it in a production application?
Related
im trying to use a mix of html and php to allow a webpage to have a keypad like what you find on card readers and security locks. this will redirect to the html page for people to access the page inside. i am using html redirects at the moment so
<a href="file location on server">
<img src="keypad1" alt="" width="42" height="42" border="0">
</a>
there has to be a way that i can use php to listen for the click of a button and then wait for the next one without saying correct or wrong code until the # key is pressed. after each key is pressed at this moment intime the code redirects to another page and waits for the next key. if its wrong it loads the same page until the # is pressed which is just programmed to return to another page saying error. and starts the password process again. i dont want people to just hit f12 and find out the code thats why im thinking of php if the code could be external from the websites html code. no one will have the intelligence to work out where the code is if its not in front of them. any suggestions on ways?
PHP is a scripting language and executes at server side only. The result you are getting on your browser is mixer of HTML, CSS and JavaScript based on what you have used with that page.
PHP will never know what is happening on browser unless and until you inform server every time anything happens on browser. For example clicks, mouse movement, focus, blur, keypress, keyup, all these are events that can be tracked using JavaScript.
As you are trying to develop security program that should looks like card readers keypad(http://www.govgroup.com/images_products/2407014_big.jpg), right? You can track every button press with JavaScript unless # button pressed. You can use jQuery for quick & easy implementation.
You can store every button click in JavaScript variable and when # key pressed you can send entire code to php for validation and if code is correct you can redirect to success page or else if code failed you can show the same keypad log in page again with error message.
Please check below example for how to listen to button clicks and how to store values. This is just an example, you can extend the logic to your need.
var buttons_pressed="";
jQuery('ul li').click(function(){
if(jQuery(this).text() === '#'){
alert(buttons_pressed);
buttons_pressed="";
}else{
buttons_pressed += jQuery(this).text();
}
})
See # JSFiddle
I'm making a php site that has multiple buttons. One button saves, which requires it to be taken to a different page but the other buttons do simple things like add +1 to a score.
The function buttons are attached with javascript so the code looks like this for a function button:
<button onclick="addPoints(); ButtonStats()">Add</button></td>
I have tried multiple different ways to get the buttons working but I'm not sure how to do an if statement like this:
if ($_POST['SaveButton'])
$executestring = "location: process.php";
The if statement works for the save button (but clicking the other buttons currently refreshes the page).
So, how would I go about writing in the add button codes to an 'if' statement like that of the submit button? (I've tried putting in addPoints() for the executestring but that didn't work so I'm just not sure how to write it out).
Don't use <button> without the type attribute defined as button, cause they will try to submit the form, causing the page to be "refreshed". Use
<input type="button" value="click" />
or
<button type="button">Click</button>
if you don't want them to have the submit behavior.
Look at this jsFiddle example
You are calling javascript when button Add is clicked which means you can not do anything about it in php.
When you call javascript, all calculation is done on client side (for example users browser). Php is executed only when users comes to your page (because page is requested from server, server executes php and sends result).
It suggest you learn more about client side and server side languages.
I've put together a PHP script and small form which allows the user to upload image files. As it stands at the moment, this is activated as a Pop Up Window via a 'onclick' event of a button on the parent HTML page.
From research I've done on this site, I know that 'Pop Up Windows' aren't to everyones liking, so I'm really asking for a bit of advice to see whether there is an alternative to the Pop Up Window. I've tried the jQuery modal Dialog, and I've run into all sorts of problems because I have multiple submit buttons, so I'd rather not revsit that if at all possible, although the styling of the modal dialog would be along the right lines.
Personally, I'm a fan of JQuery UI Modal dialog because it's lightweight and I'm already loading UI in my apps.
But there's more going on here....the problem isn't the dialog, it's the fact that you're trying to do a file upload in a dialog. The traditional method of uploading a file is via a $_POST. This works just fine, except that your form needs an action, and that action will by default force a load of the page, even if you have it posting to itself. So in practice, if you do uploads the traditional way, no modal dialog will work.
What you're probably looking for is to do the "Ajax" method of file upload. It's not really ajax.....what you'd be doing is uploading to a "hidden" iFrame in the page that facilitates and upload seemingly without reload. Here's a tutorial...there's a million others out there.
There is also a number of jQuery plugins to make uploads easier....Uploadify is just one of them.
Note that even if you use an "asynchronous" method, you're still under the limitations of HTML. Having an upload button or an <input type="submit"> will submit your form, albeit not correctly, making the form seem like it's just failing uncontrollably. So, to combat this, either setup your upload button as another non-form submit element such as an <a> or just an image with an id that you call onclick via javascript. Or, make it a button and use event.preventDefault() onclick to prevent the default HTML behavior. I generally do the latter with jQuery UI button styling.
Why not try a lightbox ? http://en.wikipedia.org/wiki/Lightbox_(JavaScript)
There are various lightbox clones available which you could use with a iframe with a uploader form. Check out a comparison over here: http://planetozh.com/projects/lightbox-clones/
As for as i know this was the very simple and less javascript popup window. This might help you. less javascript popup box
So I have this form that needs to be filled out by the user. In the form, there is a place to upload an image. Currently, the upload takes place when the user hits "Submit" at the end of the form, however, that causes an up to 30 second delay (due to image size).
What I'm wondering is if there is a way to start that upload while the user is still filling out the form, rather than selecting the image, finishing the form, then uploading it. (This way it really cuts down on the time needed, per form)
The form itself already has a dozen other things it's doing to submit the information to the database and such, so i've been looking into using javascript with an onchange event to get into the javascript, and perhaps from there moving back into php to perform the upload, all while not reloading the page.
Any ideas or suggestions?
There really aren't many ways, the most common one is to use an iframe. Something along the lines of: http://valums.com/ajax-upload/
This has worked very well for me:
jQUploader
So I have my upload script working just fine, but now it's a matter of making it look the way I want for my layout.
<input type="file" name="userfile" id="userfile"/>
This obviously shows a textbox with a Choose File button. What I really need is my own custom button (which will ultimately be an image) that upon successful file select (not upload quite yet) triggers a jQuery event to show a div. I do NOT want the filename textbox to show.
Basic steps outlined below.
User clicks on image button to upload their file
User selects file
jQuery shows a div with more fields
User clicks submit and file is uploaded
File upload elements are notoriously difficult to access for security reasons. I think the best you can do is attach a handler to the change event of the file upload that displays the div if the file field's value is different from null.
A custom button is out of the question. To get that, you would have to resort to a file upload alternative like Flash-based SWFUpload.
There is a solution for this using jQuery here. It enables you to use an image for the upload button, and with a little customization I believe you could get it to do what you're looking for.
The few solutions to this that I've seen actually hide the upload input field and then display their own custom button. As the mouse moves over this custom button they use a script to reposition the input element beneath the cursor. Quite a lot of work.