I have a script already for uploading pictures, but I want the ability to select more pictures at once on upload,by holding down ctrl,I know I can use uploadify but I don't want to start over, mabe you guys know a script or something for jquery, that will work without to remove the current code, or you guys could give me a snippet.
The ability to slect multiple files in entirely the browsers features. Which cannot be changed by using a Javascript or css or html. Using uploadify or similar as you mentioned in your question is the right way to go.
You know uploadify also uses the swfobject.js, to overcome this limitation by using an actionscript instead.
You could write your own upload system in javascript with ajax. See http://www.html5rocks.com/en/tutorials/file/dndfiles/
Basic workflow
get local file contents
push to server via ajax
With this you could do a multi-file select and/or drag and drop upload system. Best and maybe only solution if you want to stay in javascript.
Related
I would like to generate a PDF portfolio using JS from an HTML/CSS page on a local machine. I would use a PDF template file which includes a PDF portfolio Navigator in SWF form. I have successfully accomplished this using C# and a command line program, but can not identify the proper Javascipt components to do this browser-side or pseuo-server with Node.js. Basically, I am looking for something which will allow me to append a PDF to a new or existing PDF via configuration choices and an 'assemble' action using a JS or HTML button. iTextSharp provides the required PDF interaction functionality, but I can not figure out to run this inside an HTML to allow configuration via the HTML/CSS DOM (i.e. checkboxes, text field desciptors, etc...). Does a library with this type of functionality exist?
So you want to create a PDF using JavaScript?
On a quick google search, I found what appears to be a javascript library for creating and manipulating PDFs call jsPDF
If you want information on how to upload files with JavaScript alone, here is an article on how to do that. It also shows you how to use the file element.
For style, I recommend using a CSS Framework is you don't know much about CSS. I personally use Twitter Bootstrap for quickly prototyping things. It's quick and easy, and has good documentation. You can also use this to see how to make a form in HTML. I haven't got any good starter tutorials for HTML off the top of my list, sorry.
If you don't know much about JavaScript, when it comes to getting the options from the form, so that you can use them as configuration options, I'd suggest using the jQuery framework. It'll help you get up and running quickly enough
Note, all of this shouldn't replace basic training in JavaScript and HTML/CSS. Frameworks make things simpler, but if you don't know how to do something without a framework, you're going to have a hard time with a lot of the more complicated things. This goes for every language
I've been banging my head for a few days over this problem so I figured I'd look for some help here.
BACKGROUND
We've built a form where users can, amongst other things, upload files. We have implemented desktop drag and drop for HTML5 users. We're also using uploadify for traditional upload. The ONLY reason we're using uploadify is to allow users of older browsers to multi-select files. If it wasn't for the multi-select feature in older browsers, we would not be using any library for uploading and just use the new "multiple" attribute of the file input.
PROBLEM
I consider uploadify and desktop drag & drop 2 methods for basically doing the same thing which is allowing the user to give you an array files which they wish to upload. Once this is done, I think both methods should call the same function, passing in the array of files intended for upload. However, it seems that the file collection from uploadify is anatomically different than the file collection from drag and drop (e.originalEvent.dataTransfer.files).
So at this point, it looks like I have 2 options:
1) Find a way to manually add the files collected from desktop drag and drop to the uploadify que and then call the upload method.
2) Find a way to collect the selected (queued) files from uploadify and pass them to a separate ajax method (the same on the drag and drop files are passed to). I almost got this working but, as I mentioned, the file objects are different.
Has anyone had to deal with this before? Are there more elegant solutions that I'm missing here? Any help would be appreciated. I can add code samples if anyone needs it.
I believe that this question has been asked in a few different forms, but I've read quite a few different responses.
At first, I had a web-application written with mostly jQuery that would make use of servlets to retrieve information from various locations JavaScript could not access (ie. Feeds, images from a server, etc.). Now, however, I've been told to do away with the servlets and application configuration classes so that this project of mine contains only HTML, CSS, and JavaScript/jQuery. Rather than pulling the images off of the server, I need to retrieve them from a local file on the computer. I know that allowing this might seem like terrible design, but it's what I've been asked to do. At any rate, what I really need to do is count the number of image files in a directory and then perhaps compile an array of the filenames themselves. I could do this fine in Java when using the servlets, but without them, I'm not sure how or even if this can be done.
I'm basically trying to use the jQuery Cycle plug-in to cycle through these images like a slideshow. I inject (or $("#div").append()) these images into the div by using a loop based on the number of images present.
So, is there a way I can do this with using JavaScript, HTML, jQuery plug-in, etc? I'd like to avoid using PHP and Java at this point...
You can't just read a directory with JavaScript; however, there appears to be a way to "exploit" how browsers function using http://www.irt.org/articles/js014/. It may not be pretty, but the demo works in the latest Chrome and IE7-9 for me. I'm sure some of the techniques could be updated to use cleaner code if you'd like to improve upon it.
EDIT:
Another technique you could use can be found in Javascript read files in folder
It definitely looks to be a cleaner solution. What I'd recommend is extracting the body contents to inject into a hidden div or using the path for an iframe that you can read from.
I was trying to do something like this: http://www.element-it.com/Examples/MultiPowUpload/AdvancedHTMLinterface.html
But in my search for information I found that is not possible to perform multiple file selection with simple HTML and JavaScript (and JSP in the server side). There is a way to do this without using Flash? A third party component you could recommend?
Thanks.
Actually according to the specification, normal HTML file upload fields are supposed to be multiple-file-upload fields. Opera supported it for a bit, allowing you to ctrl-click to select multiple files from a file picker. But it almost always broke the webapp since many web frameworks didn't know about it and would fall over.
In the meantime, it usually suffices to use JavaScript to add an extra file upload field to the form when the previous one has been filled in. This can be made gracefully-degrading for non-JS UAs, whilst sprucing up the management of multiple files with script and pretty icons.
If you go with a Flash uploader, it's a good idea to back it up with a simple HTML file upload field for compatibility there too.
It is still works via flash, but the YUI Uploader component allows you to add multiple file selection with minimal knowledge of flash - the API to interact with it is purely javascript.
HTML 5 will support multiple file upload, but that is not currently well supported in a large number of browsers
I need to make new own file upload field using HTML and Javascript since Built-In file upload not showing full path of the file
I need to make it similar to file upload by using button and textbox
please help to solve this problem
You can't.
There are security considerations browsers must adhere to and there is now way around that.
FYI this is also why Firefox doesn't allow drag and drop into a file field.
Just fyi, I think the path display depends on your browser.
If you're willing to/can do so, java (not javascript) might be able to help you with your original problem. Java brings it's own problems, though.
The file upload is a specific input type, which you can't easily replace, but in some browsers you may be able to style it.
You should be able to access the filename from javascript, and display this in a different part of the page (possibly hiding the file input at the same time) so the user can see what will be selected.
Another option is to use Flash for a fancier front-end (see http://www.flickr.com/photos/upload/ (assuming you have a flickr account) as an example), but I've never used one of these as a developer