使用jquery ajax上传svg和png文件

Question

大家好，我想上传svg效果很好，但是一次我使用画布将这个svg转换为png，然后我想同时上传svg和png文件。 我尝试了很多但是没有任何想法。

我的代码将svg转换为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");    

和使用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);

    })

和PHP文件

 //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;
}


}
?>

我想同时上传文件svg和php ..在Andvence中感谢

Answer 1

使用本教程进行文件上传逻辑，您必须使用$ _FILES数组而不是$ _POST

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

如果发布文件内容，则服务器脚本应如下所示

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;
}

Answer 2

我不久前通过将base64编码的图像发送到json中的php服务器，然后对其进行解码并编写一个文件来实现这一点。 服务器上的解码使我可以检查有效性等，并在json响应中返回更新的base64编码数据。

看到这个答案，可能会有所帮助： 从HTML5 Canvas（readAsBinaryString）获取二进制（base64）数据