I'm using a lightweight image editor jQuery plugin called andyvr/picEdit
https://github.com/andyvr/picEdit
This is just a plugin that turns an input:file element into an HTML canvass, and allows the user to select/edit/crop/manipulate an image file on the client side. The actual uploading and processing is done via the usual FORM UPLOAD and PHP $_FILE processes.
What I wanted to do is grab the "edited" picture data from this plugin and send it via $.post() instead of through the Form submit action.
Do you guys know what element I should select to include in my post variables?
var postvars = {};
postvars.final_image = $("#what_element").val();
$.post("script-name.php", postvars ,function(data){.....
I tried to go through the JS file but I can't seem to figure it out.
PS
I hope I came across clear with this question. I was having a hard time structuring it.
Assuming you are using the same picedit as I used and are still looking for an answer:
The html file input:
<input type='file' name='thefile' id='thebox'>
The jquery to make the file input act like an image edit box:
$(function() {
$('#thebox').picEdit();
});
The post command:
$.post( "handler.php", { story_edited : 1, id : 1 }, function( data ){ document.getElementById( 'photos' ).innerHTML = html = data }, "html" );
Notes:
handler.php = the name of the file that you want to use to process the input!
<div id='photos' name='photos'>
is a standard div tag that I use to update onscreen info in another part of the page! So, document.getElementById( 'photos' ).innerHTML will load handlers.php in to the photos div tag!
Use:
foreach($_FILES as $file)
to process the images as normal file upload from a web page!
I have one other button that pulls it all together. After I finish editing the image, I click on an update button that calls the handler and uploads and saves the file as well as dynamic updating of a photoalbum section elsewhere on the page.
TODO:
If I could find a way to attach a callback function I would not need to use this separate button.
Related
We use wordpress and have our users fill in a form.
When they click on the submit button, the following happens (thanks to a PDF plugin):
The form and the submit button disappear
A green message is shown ("Success...") and a download link to a PDF file appears, that the plugin has generated out of the filled form so the user can download it.
However, the plugin does not place the file on our servers and thanks to the nonce system (it's like a token), the link won't work at a later point in history.
And that's why I want to auto-download the file to the server as well (no matter if the user downloads it too or not).
My plan so far:
Tie a jQuery script to the submit button, that (as soon as the button is clicked) waits for an element (in this case the download link) to appear like so:
$(document).ready(function(){
$(".submit-button").click(function () {
waitForEl(".pdf-link", function() {
console.log(".pdf-link").attr("href");
});
});
});
var waitForEl = function(selector, callback) {
if (jQuery(selector).length) {
callback();
} else {
setTimeout(function() {
waitForEl(selector, callback);
}, 100);
}
};
(Source of the waitForEl function: https://gist.github.com/chrisjhoughton/7890303)
Where you see the console.log, I want some way to automatically download this PDF file to the server of our website instead, next to the JS file where the code from above is in.
Is that even possible? I can use JS and PHP to achieve this somehow, since we're using Wordpress.
In my current setup I'm uploading an image via a form in form.php. This form is handled in a new php file called upload.php that is called via teh action and detects a when a post is made.
In the form.php I've got a Jquery progressbar ready to be animated
$("#progressbar").progressbar({ value: 0 });
How do I get the '0' that comes after value, to be updated with the status of the upload?
Can I use php to generate a percentage of upload complete? I want to keep my upload form in HTML and I want to use jquery to animate the status bar.
You cannot use php to make callback, but you can make it with jQuery.
Look at this: File upload progress bar with jQuery
So I'm struggling a bit to find what I'm looking for and how to implement it.
I have a basic PHP file uploader working, in that a user presses a custom upload button, selects a file and then using JS, it checks for a change (Ie. the user selecting a file) and then submits the form which uploads the image fine.
What I also want now is a drag & drop to upload area. So the user can drag an image from their file explorer and drop it in a designated place (not the whole page) and then once that image has been dropped for the form to submit automatically with their image and use the same PHP processing.
Is this possible and realistic?
This is absolutely realistic and possible without using any third parties plugin.
The following snippets should give you an idea of how it could work:
Drop area
$(".drop-files-container").bind("drop", function(e) {
var files = e.originalEvent.dataTransfer.files;
processFileUpload(files);
// forward the file object to your ajax upload method
return false;
});
the processFileUpload()-Method:
function processFileUpload(droppedFiles) {
// add your files to the regular upload form
var uploadFormData = new FormData($("#yourregularuploadformId")[0]);
if(droppedFiles.length > 0) { // checks if any files were dropped
for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped
uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files
}
}
// the final ajax call
$.ajax({
url : "upload.php", // use your target
type : "POST",
data : uploadFormData,
cache : false,
contentType : false,
processData : false,
success : function(ret) {
// callback function
}
});
}
form example
<form enctype="multipart/form-data" id="yourregularuploadformId">
<input type="file" name="files[]" multiple="multiple">
</form>
Feel free to use something like this as a starting point. The browser support of this you can find here http://caniuse.com/#feat=xhr2
Of course you can add any extras you wish like progress bar, preview, animation...
I apologize upfront for my lack of jquery knowledge. In this website I am building, a user is presented with a number of thumbnail images representing plants. When a thumbnail is clicked, a jquery popup is initiated. What I would like to be able to do is pass a php variable that has the ID of the plant over to the jquery popup to display the prper information. Any help would be greatly appreciated. Thank you.
EDIT: http://www.plantcombos.com/header/main_index.php?display=random_mix
Im pretty sure you dont need to query PHP each time ... something like this would work :
<img class-"imgclick" src="/small-plant.jpg" data-id="123" />
This would be the output from your server side (php if thats what your using) - it stores the ID of the image in the data attribute
JavaScript :
$(document).ready(function() {
$('.imglink').click(function(event) {
event.preventDefault();
$('dialogid')
.data('image_id', $(this).data('id'))
.dialog('open');
})
})
the image id from the data attribute is then passed to the data attribute of the dialog. This attribute can be accessed using $(this).data('image_id') form within the dialog then
Use the jQuery AJAX method to gather data from a PHP file and display it on the page. It is very easy and you can pass any variables (parameters) you like to the page.
http://api.jquery.com/jQuery.ajax/
For example:
// This will send a request to a PHP page
$.ajax({
url: "http://example.com/test.php",
dataType: "html",
success: function(data){
// Place the returned data into your content
$('#image').html(data);
}
});
I use AJAX POST to send form data to an external script and attempting to hide the form on submit and prompt the user to download the script.
The script itself works well (uses fpdf to output pdf file for download). For some reason, prompting the user to download though never comes through.
My Ajax request is currently:
$.ajax({
url: "file.php",
type: "POST",
data: data,
cache: false,
success: function (html) {
//hide the form
$('#form').fadeOut('slow');
//display results
$('#form_results').fadeIn('slow');
$("#form_results").html(html);
}
});
file.php (on it own) will generate and display a PDF using FPDF. By setting the Output to I, the document is output to a browser, setting to 'D', it would normally force a download if I were simply accessing file.php directly.
any ideas?
Unfortunately you can't force a download directly from an ajax call. Your best bet is to submit the form through ajax and have ajax respond with a url that you can redirect the user to that starts the download. However, just an FYI, using location.href to a page that sends a header to force download in IE will cause the yellow security bar to appear on the top of the page. This happens in IE8, not sure about other versions. FF and Chrome don't have a problem with it.
Edit:
Just wanted to add, when you do redirect someone to a page that forces download, they don't actually leave the page they currently are on. So they won't have to reload an ajax page or anything. The download dialog will just show up. So if you are on index.php and you say location.href='download.php' and download.php forces a download. You just get the download dialog and don't leave index.php.
Edit2:
there are actually quite a few questions about this already.
https://stackoverflow.com/search?q=force+download+over+ajax
The problem is you try to show results but it is in form, which is hidden. Try something like :
//hide the form
$('#form').children().fadeOut('slow');
//display results
$('#form results').fadeIn('slow');
$("#form results").html(html);
This way, every children will be hidden but the parent itself won't.