Passing one image through ajax and another through form

问题

Onclick button i am and trying to save 2 different images.

I am passing One image through ajax & another through form, but i can able to download only one image at a time. Will it create any conflicts ?

Do i need to have correct Content-Length header for both image ?

Html

<div id="target">
<div id="container" class="container"></div>
</div>

<input type="submit" value="Save" onclick="capture();" />
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
    <input type="hidden" name="img_val" id="img_val" value="" />
</form>

Script

function capture() 
{
    // one image
    var canvas = document.getElementById("1");
    var dataURL = canvas.toDataURL(); // THE BASE 64 DATA
    var dataFileName = document.getElementById('fileup').value.replace(/.*(\/|\\)/, ''); // GET THE FILE NAME THAT USER CHOSE
    var dataFileType = dataFileName.split('.').pop();
    data = new FormData();
    data.append('imgBase64', file, file.name);

    $.ajax({
        type: "POST",
        url: "save.php",
        cache:false,
        contentType: false,
        processData: false,
        data: data
    }).done(function(o) {
        var response = JSON.parse(o);
        $('body').prepend('<img src="/var/www/html/ecom1/site/test/final/' + response.data[0].fileName + '" style="height: 200px; width: auto;">');
    });

     //another image
    $('#target').html2canvas({
        onrendered: function (canvas) {
            //Set hidden field's value to image data (base-64 string)
            $('#img_val').val(canvas.toDataURL("image/png"));
            //Submit the form manually
            document.getElementById("myForm").submit();
        }
    });     
}

php

<?php

// One image code : 

if (isset($_FILES['imgBase64'])) 
{
    $fname   = $_FILES["imgBase64"]["name"]; // THE FILENAME THE USER CHOSE IS RECEIVED VIA POST
    $img     = filter_input(INPUT_POST, 'imgBase64'); // THE BASE64 ENCODING RECEIVED VIA POST
    $imgtype = $_FILES["imgBase64"]["type"]; // THE FILE TYPE / EXTENSION IS RECEIVED VIA POST   

    if(move_uploaded_file($_FILES["imgBase64"]["tmp_name"], "/var/www/html/ecom1/site/test/final/".$fname))
    {
        echo '{"error":false, "message":null,"data":[{"msg": "Image has been saved successfully!", "fileName": "' . $fname . '"}]}';        
    }
    else
    {
        echo '{"error":true, "message":"File not uploaded"}';
    }

}

// another image code : 

//Show the image
echo '<img src="'.$_POST['img_val'].'" />';

//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('/var/www/html/ecom1/site/test/final/img.png', $unencodedData);

?>

Here is Full html & php code

来源：https://stackoverflow.com/questions/57158431/passing-one-image-through-ajax-and-another-through-form

标签

javascript

php

jquery

server

image-uploading