Question

大家好我想上传的svg它运行正常但是我一次将这个svg转换为png使用canvas然后我想上传文件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编码数据。

请参阅此答案，它可能有所帮助：Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

使用jquery ajax上传svg和png文件

2 个答案: