uploading image using javascript

Question

I'm stuck!! :( I want to upload image file with a title and a caption, I want to use javascript for validation of title caption and a file choosen.

My html goes here:

<input type="text" name="title2" id="title2" value="title" /><br />

<textarea cols="50" rows="10" name="caption" >caption goes here...</textarea><br />
<input type="file" name="photo" id="photo" /><br />
<button id="submit_info" onclick="photowcap()" >post</button><br />

and my javascript here:

function photowcap()
{

var title = document.getElementsByName("title2")[0].value;
var photo = document.getElementsByName("photo")[0].value;
var captions = document.getElementsByName("caption")[0].value;
var caption = encodeURIComponent(captions)

var xmlhttp;
if(title == "" || title == " " || title == "title")
{
    document.getElementsByName("title2")[0].focus();
    document.getElementsByName("title2")[0].value="";
    return;
}
else if(captions == "" || captions == " " || captions == "caption goes here..."){
    document.getElementsByName("caption")[0].focus();
    document.getElementsByName("caption")[0].value="";
    return;
}
else if(photo == ""){
    alert("please choose image");
}
else{
if (window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            alert("Success!!!");
        }
    }
xmlhttp.open("GET","photowcap.php?    title="+title+"&caption="+caption+"&photo="+photo,true);
    xmlhttp.send();}

}

And for saving it using php:

<?php

include("admin_conn.php");

$title = $_GET["title"];
$caption = $_GET["caption"];
$photo = $_GET["photo"];
$time=time();
$date = (date("D F d Y",$time));

$query_photowcap = "INSERT INTO school_updates(title, photo, caption, date, time)     VALUES('$title','$photo','$caption','$date','$time')";
mysql_query($query_photowcap);

?>

it only save for the file path as "C:fakepath/filename...." because I dont have any idea on how to get filename using javascript, and finally I have this code for saving the actual image into the folder but I dont really get where I should place it: THANKS IN ADVANCE :)

<?php

error_reporting(0);
$max_file_size = 200 * 1024; #200kb
if (($_FILES["photo"]["type"] == "image/gif")
  || ($_FILES["photo"]["type"] == "image/jpeg")
  || ($_FILES["photo"]["type"] == "image/png" )
  && ($_FILES["photo"]["size"] < $max_file_size))
  {
  $path = 'images/' . uniqid();
  move_uploaded_file($_FILES["photo"]["tmp_name"],
  $path.$_FILES["photo"]["name"]);

  }
else
  {
  echo "Files must be either JPEG, GIF, or PNG and less than 200 kb";
  }

?>

"C:fakepath/filename...." is sth given by the browser security settings. The original path you won't be able to get. dev.sencha.com/deploy/ext-4.0.0/examples/form/file-upload.html was done by professional programmers, and even they couldn't circumvent it. — Alexander
– Alexander, Commented Jan 9, 2014 at 14:52
please help :) I'm just kinda stucked...sorry for bad english :D — AlexJaa
– AlexJaa, Commented Jan 9, 2014 at 14:52
@Alexdn you need to learn how files work. This is not as simple as copy/paste. You need to send the file as binary data and handle it as such on the server side. — php_nub_qq
– php_nub_qq, Commented Jan 9, 2014 at 14:54
I have done uploading image before, but using pure PHP. Now, I want to do it with javascript. What can you suggest sir?? — AlexJaa
– AlexJaa, Commented Jan 9, 2014 at 14:55

php_nub_qq · Accepted Answer · 2016-12-14 21:19:41Z

6

In order to access files with the $_FILES superglobal they need to be sent with a multipart/form-data content-type header and appropriate attributes. Unfortunately you cannot do this with xhr's send method manually because sending a string will be automatically converted to UTF-8. Fortunately though you can still send binary data such as a file from javascript's window.File.

This is not supported in older browsers. The code would look like

var file = document.getElementById('photo').files[0];

...

xhr.send(file);

And then on the server side you will need to access the input buffer directly in order to grab a hold of this file

$file = file_get_contents('php://input');

If you insist on using $_FILES you could use the FormData object in javascript. The reason I left this as a second option is because I've heard about greater support issues and I personally avoid using it for now.

var formData = new FormData(document.getElementById('theForm'));
...
xhr.send(formData);

EDIT 2016

It has been some time now since I posted this answer and now the FormData object is widely supported, if you are looking to upload files along with other data you may look into that.

edited Dec 14, 2016 at 21:19

answered Jan 9, 2014 at 15:05

php_nub_qq

16.1k25 gold badges84 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zozo Over a year ago

Didn't know this... can you share a link or something with more details?

Ray Nicholus Over a year ago

@zozo Have a look at the File API and XHR2.

Community · Accepted Answer · 2017-05-23 11:45:40Z

0

You are trying to upload an image with ajax... short answer... normally you can't. You need a multipart/form-data to upload, making ajax upload a pain.

An easy work around would be to validate the form with js, then normally submit it. Like here: Ajax Upload image - well... ignore the title, is misleading.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Jan 9, 2014 at 15:02

zozo

8,64019 gold badges83 silver badges142 bronze badges

6 Comments

AlexJaa Over a year ago

Now, I have just realized something important.

zozo Over a year ago

You can share with the rest... not just make us curious :).

Ray Nicholus Over a year ago

You can upload files via ajax in all modern browsers.

zozo Over a year ago

That's why I said normally... and said it is a pain not impossible :P. Also ty for the other comment (at php_nub) answer.

Ray Nicholus Over a year ago

It's not a pain, it's very easy with the File API and XHR2

|

Collectives™ on Stack Overflow

uploading image using javascript

2 Answers 2

EDIT 2016

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT 2016

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related