upload svg and png file using jquery ajax

Question

Hello Everyone I want to upload svg it works fine but at a time i convert this svg to png using canvas and then i want to upload both file svg and png. i try a lot but not get any idea.

my code to convert svg to png

var oFReader = new FileReader();
 if(file.type.match(/image\/*/)){

      oFReader.onloadend = function() {

      console.log(oFReader)
      var blob = new Blob([this.result], {type: file.type});
      var url = URL.createObjectURL(blob);

      var image = new Image;
      image.src = url;
      image.onload = function() {

        var canvas = document.querySelector("canvas");
        canvas.width = image.width;
        canvas.height = image.height;

        var context = canvas.getContext("2d");

        context.drawImage(image, 0, 0);

        var a = document.createElement("a");
        a.download = "image.png";
        a.href = canvas.toDataURL("image/png");

and code for upload using jquery Ajax

$.ajax({
        type: 'POST',
        url: 'http://localhost/uploadTest/uploa.php',
        data: { svg : $("#myfile").val() , png : pngfile_path},
        cache: false,
        crossDomain : true,
        contentType: false,
        processData: false,
        success: function(){
            console.log("done")
        }
    }).done(function(dat) {
        console.log(dat);

    })

and php file

 //upload.php

  header('Access-Control-Allow-Origin: *');

  $output_dir = 'upload/';

  echo $_POST["svg"] . "svg---";
   echo $_POST["png"] . "png-**";

 if ( !file_exists($output_dir) ) {
   mkdir ($output_dir, 0777);
 }

 if(isset($_POST["svg"]))
  {
    //Filter the file types , if you want.
    if ($_POST["svg"]["error"] > 0)
    {
     echo "Error: " . $_POST["svg"]["error"] . "<br>";
    }
else
{
    //move the uploaded file to uploads folder;
    move_uploaded_file($_POST["svg"]["tmp_name"],$output_dir. $_POST["svg"]["name"]);

 echo $_POST["svg"]["name"];

 exit;
}


}
?>

i want to upload both file svg and php.. thanks in andvence

Sundar · Answer 1 · 2014-04-05T07:17:10.097

0

Use this tutorial for file upload logic you have to use $_FILES array not $_POST

http://blog.trofeosolution.com/index.php/blog/file-upload

If you post file content then your server script should be like this

if ( !file_exists($output_dir) ) {
   mkdir ($output_dir, 0777);
 }


 if(isset($_POST["svg"]))
  {
    $svg = $_POST["svg"];

    //Filter the file types , if you want.
    if (!empty($svg))
    {
        file_put_contents('abc.svg', $svg);

    }else{
        echo "Error: SVG POST fails<br>";
    }
else
{

 echo 'POST failed';

 exit;
}

edited Apr 05 '14 at 07:17

answered Apr 05 '14 at 06:46

Sundar

4,580
6
35
61

$_FILES will accept multi-part form data. POST will accept only url encoded details – Sundar Apr 05 '14 at 06:47
I know about that bro...but i dont know how to upload both file svg and png which i converted. do you have any idea about that?? – Pratik Parekh Apr 05 '14 at 06:54
You can't uplaod file using javascript/jquery. But you can try using iframe based file upload with jquery. Otherwise read entire file content and POST it to server and use file_put_contents to dump the file in server. move_file_upload() won't work – Sundar Apr 05 '14 at 07:11

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

I achieved this not too long ago by sending base64 encoded image to the php server inside some json, then decoding it and writing a file. Decoding on the server allowed me to check for validity etc. and return updated base64 encoded data inside a json response.

See this answer, it might help: Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

edited May 23 '17 at 12:01

Community

1
1

answered Aug 10 '15 at 17:58

vahanpwns

939
5
12

upload svg and png file using jquery ajax

2 Answers2