upload images with php through javascript - javascript

carica.html
<td>
<input type="file" size="30" onchange="preview()" id="upload_immagine">
</td>
<td>
<div id="divImmagine" > </div>
</td>
filejavascript.js
function preview()
{
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("divImmagine").innerHTML=xmlhttp.responseText;
}
image=request.getParameter("upload_immagine");
document.getElementById("divImmagine").innerHTML=image;
xmlhttp.open("POST","stampaAnteprima.php", false);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("image="+image);
}
stampaAnteprima.php
<?php
$file_temp=($_FILES['image']['tmp_name']);
echo"$file_temp";
?>
The line of javascript image=request.getParameter("upload_immagine"); returns nothing. How do I get the value to pass to php and then read the file via $_FILES['image']['tmp_name'] in practice it would be image? Do you have any advice?

This will allow you to send files to php.
You can add more eventlisteners to display the upload progress and error handling.
function UploadPhoto(){
var file = document.getElementById('upload_immagine').files[0];
var formdata = new FormData();
formdata.append("image", file);
var req = new XMLHttpRequest();
req.addEventListener("load", function(event) { uploadcomplete(event); }, false);
req.open("POST", "stampaAnteprima.php");
req.send(formdata);
}
function uploadcomplete(event){
// Your php reply = event.target.responseText
}

Related

save url responce into variable with javascript / html

in a webpage i would like to collect a response from another web server at a given URL address.
let's say someone else has a server at http://mysite/123 that responds with a simple string. (without headers and stuff).
what is the most SIMPLE way to get javascript on my webpage to collect a url's raw response in preferably a byte array variable? though i would except an answer that saves in string to get me going. this is an exact copy paste from my html document and its not working for me.
thanks!
<script>
var txt = "";
txt=httpGet("https://www.google.com");
alert(txt.length.toString());
function httpGet(theUrl) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", theUrl, false);
xmlhttp.send();
}
</script>
So I'd have to say your best bet would be to look into making an HTTP (or XHR) request from javascript.
check: Return HTML content as a string, given URL. Javascript Function
function httpGet(theUrl)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", theUrl, false );
xmlhttp.send();
}

Javascript - read data from multiple files in sequence

I have a function ReadFromFile that reads from a single file on server.
How do I write a function, that can read from multiple files on server and save data from each file in separate variable in sequence?
// Update measure data from files
function ReadFromFile(filename)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
dataset_01 = xmlhttp.responseText;
}
}
xmlhttp.open("GET", filename, true);
xmlhttp.send();
}

How to make Ajax send JSON to PHP script

I am working on a webpage that needs to store data on the server in a .json file.
Here is what I have tried so far:
Javascript code:
// variable j = our json
var j;
function loadDoc(){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
j = xmlhttp.responseText;
}
}
xmlhttp.open("GET","things.json",true);
xmlhttp.send();
}
loadDoc();
function rewrite(){
var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
};
};
xhr.open("POST", "write.php", true);
xhr.send("data=" + j);
};
The PHP file:
<?php
$data = $_POST['data'];
file_put_contents('things.json', $data);
?>
Note, in other parts of my code the j variable is changed.
My problem is that after the PHP script is making the JSON file blank. Am I doing anything wrong? Is php receiving the JSON properly? If so, how can I fix that?
Cheers!
If you vote down, please tell me why.
To POST data like an HTML form, add an HTTP header with setRequestHeader(). (w3school page)
so it must be :
xmlhttp.setRequestHeader("Content-type","application/json");

sending image as a parameter in xmlhttprequest Post method failed

I am new to JavaScript. In this first i sent successfully some data as a parameters in xmlhttprequest post method. But after that i am trying to send Image as a parameter but this time the post method fails.Here i am using content-type as a multipart/form-data
I am successfully sent image as a parameter in post method.But this time i used <form> tag.
Please any one tell me about this? why my first procedure fails?
function store(){
var pname=document.getElementById("pname").value;
var price=document.getElementById("price").value;
var discount=document.getElementById("discount").value;
var desc=document.getElementById("desc").value;
var heading=document.getElementById("heading").value;
var image=document.getElementById("image").value;
var params="pname="+pname+"&price="+price+"&discount="+discount+"&desc="+desc+"&heading="+heading+"&image="+image;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var txt=xmlhttp.responseText;
var obj = eval ("(" + txt + ")");
if(obj.success)
{
userlogin(obj.username,obj.password);
}
else
document.location.href="Userregistration.jsp";
//document.getElementById("countryname").innerHTML=obj.CurrencyById[0].country;
alert("Registered");
}
}
xmlhttp.open("POST","Newproduct",true);
xmlhttp.setRequestHeader("Content-type", "multipart/form-data");
xmlhttp.send(params);
}

Upload an XML file to a remote site with XHR

I am trying to upload an xml file to an external URL that will process the file and give feedback on any missing or incorrect information with that XML file. The feedback needs to be in XML format. I am trying to use XHR to do this. It seems I can make the call but the IT people at the remote site say they are not receiving the XML document. The remote site does send feedback with an error. Will someone take a look at my code to see if I have missed something? It is almost like there is a missing link between my form and the actual upload process. Thank you in advance for your help!
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var file = input.files[];
var fd = new FormData();
fd.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'External URL', false);
xmlHttp.onreadystatechange=function()
{
if((xmlHttp.readyState==4)&&(xmlHttp.status == 200))
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("Records");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xhr.send(fd);
</script>
<form action="External URL"
enctype="multipart/form-data" method="Post">
<input type="file" name="file">
<input type="submit" value="Upload File"/>
</form>

Categories

Resources