I have a form where the admins will be uploading more then 2 pictures at a time, i had been using the basic HTML file input style, however i want to do more with it as i am using a beautiful admin theme from themeforest, (the author haven't included the styled file input element in skin), i want to do it manually. which should meet the following requirement
a) A styled file input element should
be displayed first
b) When the user gives the file input
it should automatically upload the
file using php
c)while uploading the file i want to
see the file upload progress with tool
tip
d)once all the files are uploaded the
user should be able to process the
form with already uploaded file.
I want to admit that i have a very basic understanding of how javascript and Jquery works, however i am quite good at PHP, HTML and CSS.
I want some kinda tutorial regarding how do i style my file input to fill my need.
i am searching something like this.. File Upload
thank you
The only thing that fulfills all your requirements in a way that works with most browsers at the moment is a Flash-based uploader like SWFUpload or Uploadify.
Use SWFUpload. Look its FEATURES DEMO. It has almost everything.
Related
I'm trying to implement drag-and-drop file selection for uploading files synchronously once the form is submitted. I know how regular file uploading works with HTML and PHP. And I want to be able to process the files in PHP alongside the ones in the $_FILES array.
I've done some research and looked at several plugins but pretty much all of them either upload files once they're dropped into the window or don't use conventional html forms.
Any kind of help like ideas, snippets or plugins would be appreciated.
Thank you!
It is impossible to set the files attribute of a file input via JavaScript for security reasons. See this jsfiddle.
So, you cannot select files for a file input via drag and drop, you have to select the files via the file input directly, by clicking on the 'browse files' button.
What you can do is to implement an onUpload method for the form, to upload the files when the user clicks the submit button, via AJAX. Then, when the uploads are completed, you submit the form with the other data.
See this fiddle to see how to upload files via AJAX. The code has the drag and drop processing and converting binary files into BASE64. You will need to create the AJAX bit by posting the data. To check if the files are done, create a function to be called with setInterval, to check if all the uploads completed.
Cheers,
Apoc
Please anyone help me how to solve the following requirement using javascript and php.
when user upload(multiple file) any document we need to save that on the server, folder naming convention will be based on Year of date of birth (YYYY) and inside that (YYYY) folder will be a subfolder based on (MM) and then (DD) and then will be user Last name and inside that will be user first name. User will select type of the document i.e. assume "X, Y and Z"(Assume dropdown).
Create the file name on the server(Replace all the spaces with '~' and '/' with '!=')(File name will be yyyymmdd_lastname_firstname_documenttype.filetype), if a file already exists with same name use number(1,2,3,….) at the end.
e..g if a User Andy Walkar's dob is July 2 1979 document xyz.pdf is uploaded. His file name on the server will be "1979_07_02_walkar_andy_X~.pdf" and file will be uploaded on in the folder "Docs\YYYY\MM\DD\LastName\FirstName"
I am able to do single file upload into a server folder which is already exists on the server. But I am unable to implement mutiple file upload in to a dynamic folder structure. Thanks in advance.
Sorry for my english.
We are here to provide solutions to problems, not write all your code for you. That being said, a great solution to your problem is a jQuery plugin called Uploadify.
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.
I tried Uploadify, but UI customization was difficult.
So My choice is fancyupload
another good file uploader lib.
You can manipulate uploaded file name with your php code.
and can customize your UI easily.
FancyUpload is a file-input replacement which features an unobtrusive,
multiple-file selection menu and queued upload with an animated
progress bar. It is easy to setup, is server independent, completely
styleable via CSS and XHTML and uses MooTools to work in all
I want to have a single button that when clicked opens a file dialogue, and then after the user selects the photo they want to upload and the dialogue closes. I want the photo to upload. I cant think of a way of doing this because in the form you cant use both the type = file and type = submit together. Would I need to use jquery to achieve this? Thanks.
Yes, the idea is to use jQuery for the inital part of having a user pick a file to upload... and then some sort of other, server-side language (like PHP,) will actually do the heavy lifting (by actually uploading the file.)
Here's a jQuery plugin that helps you do this:
http://blueimp.github.com/jQuery-File-Upload/
EDIT:
Yes, I believe with jQuery (or some other library... or plugin,) it would be possible to have an event listener (or something,) pick up when a user browses for a file to upload... and automatically starts to upload it once the file has been chosen. But, again, as was said earlier, it's probably safer to take a two-step approach to file uploads for now.
try this
One-Click Upload is a jQuery plugin that replaces the standard file
input element, allowing you to use any link, image or element to be
used for the purpose of bringing up the "file browse" dialogue. It
completes the upload behind the scenes without refreshing the page,
making it less obtrusive and easier to style than a standard upload
form.
To get the upload started the way you describe you will need to use JavaScript. jQuery is a very good library to use to make that process easier, but it is not required.
I would like to implement a RTE (Rich Text Editor) with the ability to upload images anywhere inside the text. My aim is to create an "add / edit news article" page, where the client can write a story with images.
I am good at PHP and Javascript programming, so I am looking for help about methods of implementing this. Do I create a custom button in this RTE to insert a previously uploaded image or some other way? How do I display those images for the user to choose? Etc.
Bonus points for:
Multiple files upload: the ability for the client to just select e.g. 10 images that are relevant to this story.
Uses some method other than Flash as a default for upload.
Uses jQuery as I use it a lot.
RTE is very lightweight. I don't care if the client has to know a few things (like markdown or something similar), I just don't like bloated RTEs.
Uses new technologies, like HTML5 and / or CSS3.
Let me clarify a few things. I know a few Javascript RTEs and have also used them in several CMSs. So I don't need links to these, I can Google "javascript RTE" myself :). However, something like #hakre said is useful as he pointed out how extensible CKEditor is, which I was not fully aware.
To give an example of the answer I'm looking for: "you can do this with CKEditor, upload images asynchronously with jquery-html5-upload, save all uploaded image filename in a Javascript array, create a new button inside CKEditor with a custom click handler, which displays an overlay with Fancybox and you show all the images (you have filenames stored in an array), user clicks an image and you insert html into the editor".
Something like that but better :) (or should I say accurate).
Anything in here that meets with your reqs? http://ckeditor.com/developer-features
You taken a look at TinyMCEor CKEditor?
The "fake answer" you gave yourself is quite accurate. You would need a RTE editor that supports custom functionality.
The logistics would go along these lines:
User presses a button
An empty div is appended to the input with a unique id
An image uploader popup will open, with pointers to the new div
A combination of jQuery / AJAX / PHP will allow the user to upload a file within the page
The filename is returned after the upload process and inserted in the originally appended div
If you are looking for the specific code for each of these steps, I would recommend finding some tutorials as this isn't something that we can write some fast example code for.
I have a photo-upload form that allows a user to upload 1 photo. But my users are complaining that they want to upload many photos. How can I allow them to do that?
Right now I have this form for uploading:
http://www.hikingsanfrancisco.com/account/upload_hike_photos.php?hike_id=58
(I tried to paste code, but it didn't work somehow)
Any thoughts how to best go about it? Is there a way to loop through the selected files maybe? (I am using PHP)
Thanks,
Alex
Add more fields for uploading files, I don't know, maybe file or six, and the upload button will check through php which of them have information to start the upload, 1 at a time or course, in a php loop.
Here is a plugin that uses flash + javascript (MooTools) to do file upload. The upside to this plugin is that it's supported and you can Github it. It can have multiple photo uploads, limit max size, etc, and verify file information before upload. Also, has example for backend using PHP on how files are handled after it is uploaded.
Fancyupload
Features
Select and upload multiple files
Filter files by type in the select
dialog A lot of possible Events to
add your own behaviour
Show and filter useful file information before
the upload starts
Limit uploads by file count, type or size
Platform and server independent, just needs Flash9+ (> 95% penetration) which works on all browsers with it installed
Here is the jQuery plugin that does the same as the MooTools one:
Uploadify
Add new file inputs. Or use smth like swfuploader for file uploading.