I am wanting to use the jQuery-File-Upload plugin located here https://github.com/blueimp/jQuery-File-Upload . I have implemented it for the most part but I am having trouble actually submitting the form. What I would like to do is when the user clicks on "Upload", instead of uploading it to a default directory on my server, I would like the page to POST so I can verify the files and then store them on my server. Is this possible to do with this plugin?
According to https://github.com/blueimp/jQuery-File-Upload/wiki/API it looks like you should be able to set an upload handler end point using a url parameter during initialization. I would image you could point that to a php/aspx/anything else location and handle it in there.
The File Upload widget is initialized by calling the fileupload method
on a jQuery collection with the target HTML element:
$('#fileupload').fileupload();
The target element is usually a container element holding the file
upload form, or the file upload form itself, but it can also be just
the file input element itself, if an url is provided as options
parameter.
The initialization method's first argument is an object that allows
you to initialize the widget with various Options:
$('#fileupload').fileupload({
url: '/path/to/upload/handler.json',
sequentialUploads: true
});
Related
I am trying to upload a file a view the file on an iFrame but it is not working.
Here is what I have tried
jQuery('.file_upload1').change(function(){ jQuery('iframe').attr('src', jQuery(this).val()); $('iframe').attr('src', $('iframe').attr('src')); });
<label><input class="file_upload1" name="file_cover" type="file"></label>
<div>
<iframe src=""></iframe>
</div>
If this does not work, can I move the uploaded file to server directory so that the path becomes valid? How would I do this?
Apart from other problems and limitations of such solution, and specifically answering "why it does not work?" question:
The change event needs to be nested in ready function:
jQuery("document").ready(function() {
jQuery('.file_upload1').change(function() {
jQuery('iframe').attr('src', jQuery(this).val());
});
});
The src attribute of iframe must be a valid non-empty URL potentially surrounded by spaces. When selecting a file with input type file, in Windows the value will be something like c:\fakepath\file name goes.here, so before using as iframe source, you will have to rework it a little bit.
Regarding
I'm trying upload file and display it on iframe forcing it to reload
You don't need to force reload to achieve this. "Upload" means the page will be reloaded (well, unless upload is handled using AJAX, but it's not the case here I guess). In order to upload a file, the form must be submitted and the page needs to be reloaded. Once reloaded, you can easily construct the full path of the file and use it in iframe, something like:
<iframe src="<?php echo $file_full_url; ?>"></iframe>
But if you want to preview the file in iframe before uploading to server - it won't be possible due to security reasons. See this question for reference: How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
I have an image (a captcha specifically) that I want to upload to my server using PHP (or if possible and better, only JQUERY)
I created an object with this code:
var newIMG = $("img[name='captchaImage']").clone();
But I cannot send it via jQuery's ajax method or else. (Even tried to manually add but no idea how to send an object as file)
What should be the simplest PHP / jQuery code to send this object?
Thanks in advance,
You can use jsupload plugin for this purpose.
One cannot upload files using AJAX..
You can also use an iframe to simulate uploading the files..
only jquery file upload is not possible you need php
and you can use the jQuery File Upload to upload file via ajax and jquery
i need to upload a file doc or pdf or rich text through jquery and smarty
i try to pass the file in jquery is given below
window.location.href= sitePath+'download?p='+$('#file').val();
but the p doesn't have value. how to get the file path or name and how can stored in server
in controller i write just pass the query to model is given below
$model=new download();
$id=$model->upload($param);
and i can't develop the model code....
please help me
You can't send files like that.
You should either submit a form with enctype="multipart/form-data" or use some AJAX uploader (which uses form submit to iframe and then stores a file using PHP script).
EDIT: Some references
http://www.w3schools.com/php/php_file_upload.asp - tutorial on how to upload a file using PHP
http://valums.com/ajax-upload/ - example of ajax uploader.
EDIT2: The problem is not with your model code but with the way you try to submit a file.
I want to upload a file from a GWT form panel to php server;
FormPanel formPanel = new FormPanel();
formPanel.setAction("http://www.digicom.vacau.com/FileUpload.php");
formPanel.setEncoding(FormPanel.ENCODING_MULTIPART);
formPanel.setMethod(FormPanel.METHOD_POST);
In the form panel, I'm placing a file upload widget and submit button. But it is not uploading. Can someone help??
You still need to attach a (absolute or vertical)panel to the formPanel and attach a FileUpload widget to that. Don't forget to use formPanel.setWidget(Panel panel)!
Take a look at this code:
http://google-web-toolkit.googlecode.com/svn/javadoc/1.6/com/google/gwt/user/client/ui/FormPanel.html
I'll be answering this question
I want to allow my users to upload multiple files in one go and want to use FancyUpload to do it. I can get a basic version of FancyUpload working but I now need to allow users to specify some metadata for each file such as a caption or title.
Unfortunately, I've run into a couple of problems. First, I need to visually link the inputs for a file with that file. Upon choosing files for upload, FancyUpload displays a list of those files. Therefore, I will need a differing number of inputs depending on how many files have been chosen and I will also need to associate each of those inputs with a specific file.
Second, I need to POST the metadata along with the file. However, FancyUpload only allows you to specify metadata for every file. That is, I can have an input and add it as a POST parameter but then every file will receive that parameter. I need to be able to specify, say, a title for each file that is sent.
Please note that this answer assumes a working knowledge of JavaScript and Mootools. I'll tackle each problem in turn:
Rendering the Inputs
It turns out that the rendering of each file is handled by a method on the FancyUpload2.File class. To alter it, we will need to implement it as follows:
FancyUpload2.File.implement({
render: function() {
//copy the entire render function in here
}
});
Make sure you copy the entire render function across. At the moment, this will just override the default render method with... the default render method. However, we only want to alter the rendering process, not rewrite it so this is good. About halfway through the method is the line this.element = new Element('li', {'class': 'file'}).adopt( and then a list of elements inside the adopt method that FancyUpload will render. At the very end of the adopt method, enter the following:
new Element('input', {'class': 'caption', 'name': 'caption[]', 'type': 'text'})
As you can see this will add a new input to the list, intended to get a caption from the user. You might also want to add in a label and any other form elements.
Now if you select some files, you will notice that they are all rendered with the extra elements you have specified.
Posting the Inputs
When you create the FancyUpload object, you need to specify a new event in its options object:
onBeforeStart: function() {
var listSize = this.fileList.length;
for (var i=0; i < listSize; i++){
var caption = this.fileList[i].element.getElement('input.caption').get('value');
var opts = $merge(this.options.data, {
'caption': caption
});
this.fileList[i].setOptions({'data' : opts});
}
}
onBeforeStart gets fired just before we send the AJAX request. This means anything we do here will be done after the user has finished entering data and before that data gets sent. Brilliant! We need to add the new data to each file so the first thing to do is iterate over the file list. Then we find the value of caption input associate with the current file in the list and assign it to the var caption.
Then we access the files data with this.options.data and use $merge to create a new object with all that data and our new data as well. We assign this object to var opts. Finally we overwrite the files original options by using setOptions. Now when the file is sent, out data gets sent along with it and will be accessible from $_POST if you are using PHP.
Credits: I found the key to the solution to the second problem in this post.