ajax og upload image

Du har ikke fra Javascript adgang til indholdet af filer, og kan derfor ikke uploade et billede.

jeg har faktisk følgende (hentet fra nettet) - men lidt forklaring til:

<html>
<body>
<script>
var url = "post.php";
var binary;
var filename;
var mytext;

function upload() {
    filename = document.getElementById('myfile').value;
    mytext = document.getElementById('mytext').value;
    document.getElementById('ajaxbutton').disabled = true;

    // request local file read permission
    try {
        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    } catch (e) {
        alert("Permission to read file was denied.");
    }
   
    // open the local file
    var file = Components.classes["@mozilla.org/file/local;1"]
        .createInstance(Components.interfaces.nsILocalFile);
    file.initWithPath( filename );       
    stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
        .createInstance(Components.interfaces.nsIFileInputStream);
    stream.init(file,    0x01, 00004, null);
    var bstream =  Components.classes["@mozilla.org/network/buffered-input-stream;1"]
        .getService();
    bstream.QueryInterface(Components.interfaces.nsIBufferedInputStream);
    bstream.init(stream, 1000);
    bstream.QueryInterface(Components.interfaces.nsIInputStream);
    binary = Components.classes["@mozilla.org/binaryinputstream;1"]
        .createInstance(Components.interfaces.nsIBinaryInputStream);
    binary.setInputStream (stream);

    // start AJAX file upload in 1 second
    window.setTimeout("ajax_upload()", 1000);
}

function ajax_upload() {
    // request more permissions
    try {
        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    } catch (e) {
        alert("Permission to read file was denied.");
    }

    http_request = false;
    http_request = new XMLHttpRequest();
    if (!http_request) {
        alert('Cannot create XMLHTTP instance');
        return false;
    }

    // prepare the MIME POST data
    var boundaryString = 'capitano';
    var boundary = '--' + boundaryString;
    var requestbody = boundary + '\n'
    + 'Content-Disposition: form-data; name="mytext"' + '\n'
    + '\n'
    + mytext + '\n'
    + '\n'
    + boundary + '\n'
    + 'Content-Disposition: form-data; name="myfile"; filename="'
        + filename + '"' + '\n'
    + 'Content-Type: application/octet-stream' + '\n'
    + '\n'
    + escape(binary.readBytes(binary.available()))
    + '\n'
    + boundary;

    document.getElementById('sizespan').innerHTML =
        "requestbody.length=" + requestbody.length;
   
    // do the AJAX request
    http_request.onreadystatechange = requestdone;
    http_request.open('POST', url, true);
    http_request.setRequestHeader("Content-type", "multipart/form-data; \
        boundary=\"" + boundaryString + "\"");
    http_request.setRequestHeader("Connection", "close");
    http_request.setRequestHeader("Content-length", requestbody.length);
    http_request.send(requestbody);

}

function requestdone() {
    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;           
        } else {
            alert('There was a problem with the request.');
        }
        document.getElementById('ajaxbutton').disabled = false;
    }
}

</script>

<form>
Text: <input type="text" id="mytext" name="mytext" size="40">
<br>
File: <input type="file" id="myfile" name="datafile" size="40"><br>
<input type="button" id="ajaxbutton" value="AJAX IT" onclick="upload();">
</form>

<div id="sizespan"></div>
<hr>
<div id="myspan"></div>

</body>
</html>
php



<?
print_r($_FILES);
?>
<hr>
<?
print_r($_POST);

$fpath = "/tmp/";

// move (actually just rename) the temporary file to the real name
move_uploaded_file ( $_FILES{myfile}{tmp_name}, $fpath.$_FILES{myfile}{name} );

// convert the uploaded file back to binary

// javascript "escape" does not encode the plus sign "+", but "urldecode"
//    in PHP make a space " ". So replace any "+" in the file with %2B first

$filename = $fpath.$_FILES{myfile}{name};
$handle = fopen($filename, "r");
$contents = fread($handle, filesize($filename));
fclose($handle);

$contents = preg_replace("/\+/", "%2B", $contents);

$handle = fopen($filename, "w");
fwrite($handle, urldecode($contents));
fclose($handle);

?>

Ja, hvis man giver javascriptet privilegier til at læse, og brugeren accepterer det, så er alt muligt ;)

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="ajax_upload.js" type="text/javascript"></script>

</head>

<body>
<form name="form1" enctype="multipart/form-data" >
tekst  <input type="text" name="tekst"><br>
billed <input type="file" name="image">
<input value="upload" type="button" onclick="upload(this.form)"></form>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="element_image">her skal billedet så vises</div>
</body>
</html>

dette er så ajax_upload.js

var xmlHttp

function upload(o)
{
image = o.image.value;
tekst = o.tekst.value;

if (image.length==0)
  {
// document.getElementById("element_image").innerHTML="test";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="upload.asp";
//url=url+"?q="+str;
//url=url+"&sid="+Math.random();

url=url+"?image="+image+"&tekst="+tekst;

xmlHttp.onreadystatechange=stateChanged2;
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
}

function stateChanged2()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtkurv_"+element_id).innerHTML=xmlHttp.responseText;
}
}

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

problemet er at den jo bare tager det i boxene med ned til upload.asp

men her skal jo gerne oploade billedet

Jamen, det kan javascript slet ikke. Generelt. Hvis du vil til at arbejde med privilegier i browseren, så er det muligt, men det bruger du selv ikke.

<ole>

Tro på Erik ... det er ikke muligt at uploade filer med XMLHttpRequests, med mindre brugeren accepterer, at der downloades og installeres en komponent - og/eller han skal ind og rode med sine settings i browser, firewall, etc.

I øvrigt siger det jo sig selv. Det ville være et gigantisk sikkerhedshul, som ville gøre WWW komplet ubrugeligt, hvis den slags upload uden videre var mulig  ;o)

/mvh
</bole>

Desuden er der ingen af dine koder, der kommer særlig tæt på Ajax. Ajax skrives i nogenlunde moderne kode, mens det, du viser, bygger på tussegammel og uhensigtsmæssig kode - kode fra dengang de store browsere kun forelå i version 4

- på opfordring i en anden tråd  :)

erikjacobsen - vil du lægge et svar så jeg kan få delt nogle point ud ;-)))

Jeg samler slet ikke på point, tak. Men Ole er sulten ... ;)

Erikjacobsen -> det mente jeg nok - men for god ordens skyld ville jeg lige hører, jeg lader point gå til olebole og hans sild ;-)))

- ja, så må jeg jo nok lade lidt falde af til sildene!  ;D

Tak for points  ;o)