Does anyone know how to upload a file in a vuejs app and pass it to a php page using jquery's ajax function. Please for the love of all thats holy I need some help with this. I essentially want to do this but run it in a vuejs method. (the following script works outside of the method and the post and files array is set. but when placed in a method it no longer works. In other words the
$_FILES and $_POST array is not set) I would prefer to do this without axios or any other external libery other than jquery if possible. Does anyone know if you can even do this in vuejs?
$(document).ready(function(){
$('#addTemplateForm').on('submit', function(e){
e.preventDefault();
app.sub=true;
if(app.name!='' && app.thumbnailName!='' && app.renderTime!=''
&& app.textFieldCount!='' && app.selectedCategories.length!=0 && app.selectedKeywords.length!=0)
$.ajax({
url:'addTemplateBackend.php',
type:'POST',
dataType: 'json',
data: new FormData(this),
contentType: false,
processData: false,
error: function(data){
alert('error');
},
success: function(data){
alert('success');
console.log(data);
}
})
});
});
Please describe the error you are having. You can check your console and also use the Vue tool plugin extension for browsers so as to help you with trouble shooting.
PS: This was a mistake. Meant to be a comment not an answer
Related
I'm using bootstrap-wysihtml5 editor. On my web its working good. But when I send data from it to php using jquery it send some extra data. For example:
When I send this:
product two
It send the followings:
product+two%3Cbr%3E
My Bootstrap wysihtml5 configuration is here:
$('#form').wysihtml5({
image: false
});
And my jquery ajax code is here:
$.ajax({
url: "index.php",
type: 'POST',
dataType: 'html',
data: {
contentEdit: $('#form').serialize()
},
success: function(data) {
alert('something ...');
}
});
What is the procedure to avoid that?
actually the problem was that I have used multiple form in one page. Otherwise it works within a framework that means when we integrate the Bootstrap wysihtml5, it's embedded through an iframe. Ultimately I have solved the problem by using ckeditor. It is more flexible and easy to use. To easily use it you can follow its API documentation. Thanks to all.
I know that this question is already asked many times by different ways. But still i am not able to figure out the answer. I mean i did not find a proper descriptive answer.
I use mpdf library to generate PDF. I post some data of hidden fields to a PHP script by means of ajax.
Following are the code snippets.
//ajax_file
$("#button_id").click(function(e){
var table_clone=$("#table_id").clone();
var tableData=table_clone.prop('outerHTML');//html for pdf generation
dataString='page='+tableData;
$.ajax({
type: 'POST',
url: 'pdfgenerator.php',
data: dataString,
cache: false,
success: function(response)
{
//what to do here in order to display pdf
},
error: function(............){
.
.
}
});
});
PHP Script
//pdfgenerator.php
<?php
include('../mpdf/mpdf.php');
if(/*checking post items are set*/)
{
//retriving post items
$mpdf=new mPDF('c','A4-L');
$mpdf->WriteHTML($tableData);
$mpdf->output('xyz.pdf','I');
exit;
}
?>
Following are my constraints
-> I don't want to save file permanently on server (which is possible by means of 'F' option in output()).
-> I have to display it in browser from where it can be downloaded.
PHP script works correctly if called without ajax. Hence it returns correct data but i am unable to display it in pdf inside the browser.
While searching for answers i found that it is not possible by means of ajax.
so is there any way around by doing something in PHP or javascript. Please provide a descriptive answer.
Thanks,
You can use this code
$.ajax({
type: 'POST',
url: 'pdfgenerator.php',
data: dataString,
cache: false,
success: function(response)
{
var tag ='<object width="400" height="500" type="application/pdf" data="'+xyz.pdf+'" id="show_obj1" class="obj"></object>';
$(#pdfdiv).html(tag);
},
error: function(............){
.
.
}
});
});
Here #pdfdiv in $(#pdfdiv).html(tag); is the id of the div in which you want to show the pdf
I hope you can help me with this issue:
My sistem runs over Zend Framework, I have installed jQuery in it's latest version. I have an input that receives a file and it makes an Ajax call when changes, and I want that call made in the background, without expecting any response (because that script will send an email when finished). My ajax call is like this:
var formData = new FormData();
formData.append('file', $(this).get(0).files[0]);
$.ajax({
url: 'uploadaddresses.php',
type: 'POST',
data: formData,
dataType: 'json',
async:true,
processData: false,
contentType: false,
beforeSend: function(){
bootbox.alert("You've made your petition correctly. When finished, an email will be sent to you.")
},
error: function(err) {}
});
return false;
Although, the call waits for a response (even FireBug shows me that uploadaddresses.php is still executing...). What i'm doing wrong? How should I do it best? I want to avoid using daemons and system calls, because system restrictions...
Thank you very much in advance :)
If you're wanting uploadaddresses.php to return an HTTP response immediately but continue processing, take a look at pcntl_fork in PHP.
Here's the main doc page: http://php.net/manual/en/function.pcntl-fork.php
Here's a good example that you might want to follow: http://php.net/manual/en/function.pcntl-fork.php#94338
Create a success method for the ajax call and have something like this:
console.log("Done");
This way you know if is complete and successful but only if you are looking at the dev tools. Unless you specify output it should not continue to run after the call has been made. Maybe you have an error in your PHP code?
EDIT: If you can't get this resolved you may want to post your PHP page as well.
I need your help with a big doubt.
Question: As I can create JSON file (with data) from JS code?
The reason is which I need use JSONP, and I wanna take that data from other domain (i.e. http://www.example.com/data/clients.json?callback=?), but this data are storage in a DB (WebSQL) and I need which that data is written in the json file (i.e. clients.json)
Please I need your help because three days ago I try do this, but I don't find yet the answer.
P.S.: Sorry for my english, not is my native language.
EDIT
Sorry my question is confused. I try again but for steps.
I need to write a JSON file with data or records from a DB (WebSQL). Actually my functions are working well (add record, update record, delete), but I need to put that data in a json file because, I'll use the next code for get the data from other domain.
(function($) {
var url = 'http://www.example.com/scripts/clients.json?callback=?';
$.ajax({
type: 'GET',
url: url,
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
console.dir(json.sites);
},
error: function(e) {
console.log(e.message);
}
});
})(jQuery);
I am trying to upload a file through AJAX. I have searched over a lot but found examples using form submit only, but I can not use form submit. I have tried several examples but nothing reaches my server. When I tried this link, it worked but again it was through a form submission.
Here is the piece of code relevant to the context
JS Code
function _upload(filedata) {
$.ajax({
url: './myURI',
data: filedata,
type: 'POST',
contentType: 'multipart/form-data',
mimeType: 'multipart/form-data', //Property added in 1.5.1
success: function (data) {
alert(data);
}
});
}
$("#cpc-uploadBtn").click(function (evt) {
var data;
data = new FormData();
data.append('file', $('#cpc-upload')[0].files[0]);
_upload(data);
});
HTML Part
<input id="cpc-upload" name="file" type="file" />
<button id="cpc-uploadBtn" type="button">Upload</button>
Edit
Is there any other way to do this without using form submit and formdata?
Assuming that you are using Safari/FireFox (only those support FormData), you need to modify your $.ajax call:
$.ajax({
url: './myURI',
data: filedata,
type: 'POST',
contentType: false,
processData: false,
success: function (data) {
alert(data);
}
});
Seeting contentType option to false will force jQuery not to add a Content-Type header for you (otherwise the boundary string will be missing from it). Also the processData flag must be set to false so jQuery will not try to convert your FormData into a string.
Now if you know that your clients are using HTML5 you should try using new JavaScript File API - check following articles:
Working with files in JavaScript, Part 1: The Basics
Working with files in JavaScript, Part 2: FileReader
Working with files in JavaScript, Part 3: Progress events and errors
Working with files in JavaScript, Part 4: Object URLs
Working with files in JavaScript, Part 5: Blobs
In all other cases you are forced to use custom plugins, for example:
Uploadify
jQuery Form Plugin
I suppose currently FormData objects are only supported in Safari/Firefox, it has not been adopted by most of the browsers yet.
I recently struggled a lot finding ajax file uploader for asp.net and I am currently using this one in my project:
https://github.com/valums/file-uploader
there is a small alternative if you want to use
<script>
// wait for the DOM to be loaded
$(document).ready(function()
{
// bind 'myForm' and provide a simple callback function
$("#tempForm").ajaxForm({
url:'../calling action or servlet',
type:'post',
beforeSend:function()
{
alert("perform action before making the ajax call like showing soinner image");
},
success:function(e){
alert("data is"+e);
alert("now do whatever you want with the data");
}
});
});
</script>
you can find the plugin here