I want to use HTML and PHP for 9 or more images upload. The problem is that I don't want 9 upload fields because it looks bad. Does anybody have any suggestions ? Maybe examples ?
Thanks.
I've been using noSWFUpload for some time and it works pretty good. It relies on XMLHttpRequest's sendAsBinary in supporting clients and falls back to iframe-based submission.
http://the-stickman.com/web-development/javascript/upload-multiple-files-with-a-single-file-element/
Connect to the fileInput's onchange event, hide it, get the value and add it to a textarea, and create another. Name them all the same plus an increment: field1, field2... Loop through the field names in PHP and check for existance with isset.
Or use Dojo's FileUploader and force html:
http://docs.dojocampus.org/dojox/form/FileUploader
What I have done in the past is to give an option on doing another upload, or, when they pick the first file, display it as a label, then have another box ready for them to pick another file. Each file input is actually with a unique name, so the server just goes through until it doesn't find the next file.
But, this requires a bit of javascripting. :)
Related
I'm trying to make a simple form that adds user input to a local xml file. Basically, I need to input a name and a proffesion.
The xml file looks something like this:
<mainNode>
<name>Jeff</name>
<proffesion>Dog Trainer</proffesion>
</mainNode>
But I need some method (either with jQuery or javascript) to populate or add to the existing file (example.xml) using that form instead of creating a new xml file or replacing the nodes. I would show I've tried so far, but i've tried so many examples I can't even decide what to show (but if necessary I'll edit this post ). Any help or pointing in the right direction would be appreciated, thanks ! :)
I've been struggling with this function for a few hours now and I can't get it to work in any way shape or form.
Assume my element location and image path are correct at all times. (Seriously, I've been going over this for the past 4 hours, it's not the element location and it's not the file path.)
What I started with was a sendkeys to the input element. This gave no error but caused the script to hang for ever; it wouldn't get past it and no images were being uploaded.
I literally tried every single possible variation of the sendkeys method listed on the first 4 pages of Google when looking for "Python PhanthomJS Selenium upload file sendkeys". Back to the drawing board.
Currently I am looking into executing a bit of JavaScript through Python to upload the file, though I have no idea how to go about this.
The page which I am trying to upload to has its form set to hidden and only shows a button which opens an upload dialog on normal browsers. I feel this is why sendkeys was not working.
Can anyone give me some input or suggestions as what to try next? Or how to execute some JavaScript from Python?
EDIT:
I learned how to execute JavaScript while using selenium in python and it saved my day.
To anyone coming here from google or whatever with the same problem, let me explain what I did:
The fact that my .send_keys() was hanging when sending keys to the input[file=input] element had me wondering before I made the topic but since the webdriver was still able to find the element I wasn't thinking too much of it and shrugged it off as something random. Later however I came with a suggestion that because it had a css type display: hidden !important the webdriver might have been able to find it, but not interact with it, and for some reason selenium just decided to hang itself instead of crashing / giving an error.
With that in mind I started browsing the docs and found the .execute_script() command, turns out we can use this to run a piece of JavaScript through the webdriver. Why I wanted this, is to see if the class styling had anything to do with it at all, how you ask? Well we can use the following line of code to change the class attribute of the input[type=file] element: document.querySelector("input").className="". This is not the most elegant solution since we are basically deleting the entire class responsible for the display: hidden !important styling. If the class were to hold more important data I'd suggest changing the class instead of renaming it to "" or deleting.
Moving on and trying it out, it showed the input button just like I hoped it would! After this I simply re-tried sending the keys and found no problems at all. There is no need for a click, submit or anything. driver.find_element_by_css_selector('input[type=file]').send_keys('path/to/file') However I did note that the way you structure the path seems to be pretty important. For example I am testing on windows and path/to/file did not upload or select any image for me, using path\\to\\file however, worked completely fine.
tldr:
driver.execute_script('document.querySelector("input")').className=""
followed by:
driver.find_element_by_css_selector('input[type=file]').send_keys('path/to/file')
Is what worked for me, and if you are in any alike situation your
variation on the script should upload the image as intended.
I'm using a pretty basic jquery ajax photo upload for a page that I've created. I'm using exactly the same code as the tutorial, except I've made the few modifications explained later. The tutorial for creating it is here:
http://www.saaraan.com/2012/05/ajax-image-upload-with-progressbar-with-jquery-and-php
The problem I'm running into is I'm trying to convert the script to allow multiple uploads on a page. I have the page setup with multiple forms already, and the php action is ready to receive multiple photos, I'm just clueless when it comes to the jquery part. It declares myform with the id of UploadForm, but since I converted it, I now have the ids of UploadForm1, UploadForm2, UploadForm3, etc..
var myform = $("#UploadForm");
There is a short way of doing the this in jquery I'm sure, but the only solution I can come up with is just repeating the jquery function as many times as I need with the ids hard-coded. Once someone shows me how to fix the UploadForm id problem, I'll be able to fix the progressbar, progressbox, statustxt, and submitbutton ids as well.
Assign a class to each one and reference the class with $('.ClassName'). Then go through the collection with .each(function(){}).
You could allow for each photo to have an input element inside your form, and with a little JavaScript you could allow the user to add/remove rows in your form. Essentially, you are looking for multiple file upload. I've found something that might help:
How to upload multiple files using PHP, jQuery and AJAX
I wanted to have one single input type of file to add multiple files on page and found below code from: http://the-stickman.com/web-development/javascript/upload-multiple-files-with-a-single-file-element/
but i am pretty new to JavaScript and having issue to extend it, what I need is when it add file to page it should add a new input of type text where I can pass title for that file .
I tried this but its showing me a pop-up window when I add a new file element and input is not beside file.
http://jsfiddle.net/4JPzL/
Below an image example how I wants it to look like
Thanks for any help.
EDIT FIX:
Never mind i have fixed it here (cant answer my own question so here it goes...):
http://jsfiddle.net/4JPzL/2/
Regards
Never mind i have fixed it here:
http://jsfiddle.net/4JPzL/2/
i want to show file upload dialog on click of a button thats not the part of input[type="file"] how can i do this?
Basically i want to stylize the file upload control of html.
Alternate way to style file inputs using JavaScript but no Flash:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
I'm pretty sure there is no way to do this for security reasons.
You may be able to do it using a Flash-based uploader like SWFUpload. It obviously needs Flash installed and functions in a slightly different way than normal file uploads.
two days ago i was dealing with the same thing. I spotted uploadify
it allows you to have custom button for upload and ability to style your progress bar. it makes an ajax call to a php script. it also has loads of options from restricting file types/sizes/etc.
pretty happy i found it. same as pekka said this one also uses a flash gateway to do this.
document.formname.file.click() works but not in Opera i am still searching the net to solve.