I'm looking for a javascript/ajax based file upload. The way it would work is this:
1) User clicks browse
2) User selects CTRL and selects the files he wants to upload
3) Via Javascript the user is shown a few loading graphics (1 per each file being uploaded)
4) After each upload finishes, a loading graphic is replaced with a success graphic and the filename of the uploaded file.
So what I'm really asking for is:
1) A way to do javascript/ajax based file uploads.
2) A way to detect when a file starts/finishes uploading, or to call a function when it happens.
Check http://valums.com/ajax-upload/ it's a neat plugin.
I recently faced a similar problem. We had been using Uploadify (http://www.uploadify.com/) to do uploads. I wrote a blog post on how to use Uploadify to perform multiple file uploads:
http://blog.bobcravens.com/2011/03/upload-multiple-files-with-progress-using-uploadify/
There are a couple of supported options:
Use a single 'input' element and select multiple files.
Use multiple 'input' elements to select a single file each.
Hope this helps.
Bob
Related
I was looking at the upload script here:
http://demo.tutorialzine.com/2013/05/mini-ajax-file-upload-form/
It is using jquery file upload to upload multiple files at once. I would like to know how to pass the order of the files that were selected to the upload.php script. ie. if you have 1.jpg, 2.jpg, 3.jpg, 4.jpg, and 4 finishes uploading first, can upload.php receive a variable that tells it that it is the 4th image that was selected? Does jquery file upload have a way of adding the order to the form action perhaps?
Thanks in advance.
It should automatically upload and read the data in the order it was received once it hits the upload.php layer. So just make sure you upload the files in the order you want them.
Well it was a really easy fix once I found it. There is a variable in the jquery.fileupload.js file called sequentialUploads. Set it to true, and it will force the order of uploads to be the order in which the files are selected.
I have a webpage in which the clients should be able to open files on server, I need to open a file open dialog box, similar to:
<input type= "file" id = "select_file" onchange = "openfunction();"</input>
but this shows files available on local machine, it should list files available on server.
Your best option is to use already existing solutions like elfinder, because it's already solved problem and you certainly don't want to implement all this UI/UX yourself again.
There is no tag in HTML which will allow you to select file from server. You will have to implement everything from scratch.
Using <input type="file"> you cannot read server files since it is a post action to post the whole file and there is no such option at all to read file from server!!
The possible solution would be either to create a HTML UI for all the files existing in the server like dropdown or checkbox and then ask user to select the files required and perform necessary option.
I'm using JQuery FileUpload in my web application. Things are working fine. Now i want to extend the behavior and get the folder name from uploaded file. Requirement is to get the folder name when user drop a file on page or select it through the file selection dialog. For this i tried to use callback "fileuploadchange" and "fileuploaddrop". Both worked and i was able to get the selected file collection i.e data.files but data.files[0] didn't contains any information about the source folder. Any idea on how this can be achieved ?
Thanks in advance.
You can only get info on what the user decides to "give" you, for security reasons. You might get that functionality by using some flash plugin, but with html/js you are not allowed into the users pc, not even folder names (thankfully)
How would one go about implementing folder uploading without using drag-and-drop? I'm looking to be able to select folders the same way one would select files.
Also, what are the upper-bounds of the number of files and folder depth?
Thanks
This is possible, but the solution is a bit awkward, which is why Fine Uploader doesn't natively support this. A file input element can either allow you to select folders OR files, not both simultaneously. So, if you want your users to choose, you will need to either provide a separate file input specifically for selecting folders, or maintain one file input element that is modified on-the-fly once the user's intentions are known.
Fine Uploader will likely provide support for selecting folders via the chooser dialog in the future as part of case #819. In the meantime, if you want to provide the ability to allow your users to select folders via the chooser dialog, you will need to provide an alternate file input element exclusively for folders, and then send the selected files in the folder to Fine Uploader via Fine Uploader's addFiles API method.
Here's an example:
<input type="file" id="directoryFileInput" webkitdirectory>
<div id="myFineUploaderContainer"></div>
$('#myFineUploaderContainer').fineUploader({
request: {
endpoint: 'my/endpoint'
}
});
$('#directoryFileInput').change(function() {
var fileList = this.files;
$('#myFineUploaderContainer').fineUploader('addFiles', fileList);
});
Of course, you may want to also style this specific file input. Once Fine Uploader case #819 is complete, you will be able to ask Fine Uploader to style and track any additional file inputs for you. Until then, if this is important to you, you will need to make any additional file input element opaque and wrap it in a styled div.
I have a little bit of an unusual situation I guess. I have a page for placing new orders and part of a new order is a variable (0-n) number of files that are to be uploaded and associated with the order on the back end. The user also needs to specify a description for each file.
I've used a couple jQuery upload plug-ins with great success, but in this case I'm not looking to upload a single file when the user hits "OK." What I really need to do is upload a file by passing a local path to some method that will do the upload.
Does anyone know of any plug-ins that do this?
Thanks!
Ajax Uploader could be helpful? I believe it allows multiple uploads.