ajax - Sending photo from javascript to server - Stack Overflow

admin管理员组

文章数量:1307740

Guys i am new to programming and i am really not aware of how to save a photo which is displayed in a div to server. I am working with java application and i am trying to display an image on div and then later save it on the server. As i know javascript variables cannot be declared in jsp or servlets because of client and server patibility. I am trying to pass the url through ajax but its not getting displayed on the server because of base64 long string. I think we cannot pass such long string to jsp or servlet pages. Is there any alternate way i can pass the string or save image to the server?

function GetXmlHttpObject() {
var xmlHttp=null;
try {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e) {
 //Internet Explorer
 try {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e) {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

function ajax() {   

xmlHttp=GetXmlHttpObject(); 
var url="/ServletExten/XmlServletGen";
url=url+"?datax=" +cordXSend +"&datay=" +cordYSend +"&sizew=" +canvasWidth +"&sizeh=" +canvasHeight ;
alert(url); 
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
}

Guys i am new to programming and i am really not aware of how to save a photo which is displayed in a div to server. I am working with java application and i am trying to display an image on div and then later save it on the server. As i know javascript variables cannot be declared in jsp or servlets because of client and server patibility. I am trying to pass the url through ajax but its not getting displayed on the server because of base64 long string. I think we cannot pass such long string to jsp or servlet pages. Is there any alternate way i can pass the string or save image to the server?

function GetXmlHttpObject() {
var xmlHttp=null;
try {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e) {
 //Internet Explorer
 try {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e) {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

function ajax() {   

xmlHttp=GetXmlHttpObject(); 
var url="/ServletExten/XmlServletGen";
url=url+"?datax=" +cordXSend +"&datay=" +cordYSend +"&sizew=" +canvasWidth +"&sizeh=" +canvasHeight ;
alert(url); 
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
}

• javascript
• ajax
• http
• servlets

Share Improve this question Follow edited Dec 24, 2012 at 7:27 Timr 1,03211 gold badge1414 silver badges2929 bronze badges asked Dec 24, 2012 at 7:16 shabbir.rangshabbir.rang 27922 gold badges44 silver badges2424 bronze badges 5

• You can use canvas to do that! first draw your image on canvas and then get canvas data with toDataURL() and upload it! – MJQ Commented Dec 24, 2012 at 7:29
• With toDataUrl() you get base64 string and i am not been able to pass such long string from javascript to jsp. – shabbir.rang Commented Dec 24, 2012 at 7:31
• Well, I have used ajax to send image data like that to the php script and save the image!!! – MJQ Commented Dec 24, 2012 at 7:33
• how did you send image data to php script? do you have sample code? Thanks – shabbir.rang Commented Dec 24, 2012 at 7:36
• Why is this one of your first projects if you're new to programming? – avisk Commented Sep 6, 2021 at 21:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Create an input element like that,

 <form id="fileupf" action="fileup.php" method="post" enctype="multipart/form-data">
      <input type="file" id="fileup" name="file" accept="image/*" >
 </form>

Then in ajax,

$('#fileupf').ajaxForm({
    plete: function(xhr) {
        alert("Upload plete");   
    } 
}); 

In php,

<?php
$target_path = "uploaded_images/";

$file_name = $_FILES["file"]["name"];
$random_digit=rand(0000,9999);
$new_file_name=$random_digit.$file_name;

$target_path = $target_path . basename( $new_file_name); 
?>

If you are saving canvas drawing then,

Javascript,

var canvasData = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'save.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData); 

PHP,

<?php 
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];


    $filteredData=substr($imageData, strpos($imageData, ",")+1);

    $unencodedData=base64_decode($filteredData);

    $random_digit=md5(uniqid(mt_rand(), true));

    $fp = fopen( 'yourfolder/new'.$random_digit.'.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
}
?>

本文标签： ajaxSending photo from javascript to serverStack Overflow