I am using this GitHub project to record some audio on a website, I want to save that file in a folder instead of displaying it on the website.
https://github.com/addpipe/simple-web-audio-recorder-demo
The current version is creating a download link and displaying the audio clip on the website, I've attempted to send the data to PHP using AJAX.
$.ajax({
url: "uploadAudio.php",
type: "POST",
data: "audio", blob,
processData: false,
contentType: false,
success: function(data){
alert('success');
}
});
and the PHP code I tried to save it as a file
<?php
$dir = "uploads/";
move_uploaded_file($_FILES["audio"]["tmp_name"], $dir. "name");
?>
Am I thinking along the right lines? have you got any suggestions for a better way of doing this?
Related
I have the following jQuery, which I think should pass a sliced file to PHP:
var blob = f.slice(start, stop);
var formData = new FormData();
formData.append('fileUpload', blob, f.name);
$.ajax({
url: 'save.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(msg){
alert("Success: " + msg);
},
error: function(bla, msg){
alert("Fail: " + msg);
}
});
However, I'm not sure what the PHP should look like to save the blob to a file.
The intention is for the browser to slice the file and then save the output.
Receive it as a file at your server
<?php
//var_dump($_FILES) // check if you received it or not
$blob = $_FILES('fileUpload');
file_put_contents('/path/to/new/file_name', $blob);
?>
You might want to save the file to a tmp location first, then do some checks on it before you move it to a final location (with PHPs rename() function).
Btw: why not just save the BLOB to DB? That is a legitimate way of handling files these days, that's what the BLOB MySQL data type is for after all.
I already asked this and it worked, have a look: send formData appended with blob to server
Due to contentType: false the data is available in $_FILES rather than $_POST. One way to do it, is like so:
<?php
move_uploaded_file(
$_FILES['fileUpload']['tmp_name'],
$_FILES['fileUpload']['name']
);
?>
im creating a service that will transform html to pdf.
Request with parameter(HTML code to be transfered into PDF) ist send with ajax post.
On server side generating pdf file is no problem.
I was trying to send it back with JSON but i figured out that its not a good idea.
So now im sending it back with no changes - full pdf file as it was generated
...
$pdf->Output('out.pdf', 'I');
And here comes the tricky part.
What can i do with it on client side?
I was trying to show it or download it but i could not figured out how.
$.ajax({
type: 'POST',
url: service_url,
data: out,
success: function (data) {
// WHAT SHOULD I DO WITH "data" IF I WANT TO SHOW IT?
error: function () {
alert("Error");
}
});
Thanks
a wild guess would say that you need to create a PDFObject and then throw it into the Ajax.
HTML
<object id="pdf" data="myfile.pdf" type="application/pdf" width="100%" height="100%">
It appears you don't have a PDF plugin for this browser.
No biggie... you can click here to
download the PDF file.
</object>
and in the Ajax you would have to do something like :
$.ajax({
var pdf = $("#pdf");
type: 'POST',
url: service_url,
data: out,
success: function (data) {
pdf.show();
error: function () {
alert("Error");
}
});
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'm using Yii framework for developing website.
Here, I have a problem in save image file which uploaded to server.
Here is the code which I used for uploading image.
<input type="file" onChange="uploadImage(this);">
function uploadImage(obj) {
var request_url = server_url + "uploadImage";
var formData = new FormData();
formData.append("photo", obj.files[0]);
$.ajax({
url: request_url,
type: 'POST',
data: formData,
processData: false,
contentType:false
});
}
And in server part, I can see the file has uploaded but can't get the file.
public function actionUploadImage() {
if (ISSET($_FILES['photo'])) {
var_dump('is set photo');
$temp = CUploadedFile::getInstanceByName('photo');
var_dump($temp);
}
}
It returns "is set photo" and "array(0){}".
Please help me.
You are uploading images using jquery/ajax. You need to include jquery and their corresponding function.
Here is one of tutorial to upload images using jquery -
http://www.9lessons.info/2013/09/multiple-ajax-image-upload-jquery.html
You could google for other tutorials.
I have xml data fetched from a file on the server side, successfully accessed without use of server-side scripts (e.g. no php).
I'd like to write that xml data back to the file on the server side after some minor changes, again without use of server-side scripts (e.g. no php). Here is what I have so far:
<button id='WriteToXml'>Write to XML</button>
<script>
$('#WriteToXml').click(function () {
var output_xml;
$.ajax({
type: "GET",
url: "/data/testdata_input.xml",
dataType: "xml",
async: false,
success: function(xml) {
$(xml).find('input').remove();
$(xml).find('test').append('<output></output>');
output_xml = xml;
}
});
// Alternative code?
// $.post( "/data/testdata_output.xml", $(output_xml), "xml" );
$.ajax({
type: 'POST',
url: "/data/testdata_output.xml", //url of receiver file on server
data: $(output_xml) , //your data
contentType: "text/xml",
dataType: "xml",
cache: false,
async: false,
success: function(xml) {console.log( 'success\n'+ $(xml).find('test') );}
});
});
</script>
In another SO thread, I read that it was necessary to use a server-side script due to the design of javascript (for security reasons). But then in another thread, I saw code that didn't involve php, so I'm hoping I could use that code to write to the xml file on the server:
$.ajax({
type: 'POST',
url: "/data/testdata_output.xml", //url of receiver file on server
data: "<test></test>" , //your data
contentType: "text/xml",
dataType: "xml",
cache: false,
async: false,
success: function(xml) {console.log( 'success\n'+ $(xml).find('test')
So far I get a success message, but the xml file on the server remains intact. It would be great to understand where I misunderstood. In the meantime I will use this php code on the server-side and try to have it work:
//javascript
$.post('savedata.php', {data: "<test></test>",filename: "/data/testdata_output.xml"}, function(){/*Save complete*/});
//savedata.php
$data = $_POST['data'];
$filename = $_POST['filename'];
$f = fopen($filename, 'w+');
fwrite($f, $data);
fclose($f);
But it would still be nice to understand.
Also, I'd love some notes on using xml file types in the $.post code rather than a php file (based on the $.post jquery doc):
$.post( "/data/testdata_output.xml", "<test></test>", "xml" );
Thanks
You need a server side script to handle anything that modifies the server. That script should set out the restrictions on who is allowed to write what and where. It's not due to the design of javascript; it's just that otherwise, anyone could write any file to any web server, which is clearly unsafe.
When the URL of the request is a script that responds to user input, you'd use an HTTP POST. When the URL of the request represents a file to be written (as in your case), you would typically use an HTTP PUT. (You don't really have to use PUT -- you're the one writing the handler script, after all -- but writing to a file on the server is what PUT is for.)
In terms of the jquery request, without server-side scripting, the POST request is not significantly different from a GET request, in that the content of the file found at the URL is returned as the body of the response. (There are differences -- e.g. the POST would not be cached -- but I think that's the gist of the jquery example you mention.)