jQuery / ajax upload image and save to folder

ajax, file-upload, jquery, php

Solution

Try this one.

Script:

function uploadFile(){
  var input = document.getElementById("file");
  file = input.files[0];
  if(file != undefined){
    formData= new FormData();
    if(!!file.type.match(/image.*/)){
      formData.append("image", file);
      $.ajax({
        url: "upload.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data){
            alert('success');
        }
      });
    }else{
      alert('Not a valid image!');
    }
  }else{
    alert('Input something!');
  }
}

HTML:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>    
</head>
<body>
    <input type="file" id="file" />
    <button onclick="uploadFile();">Upload</button>
</body>
</html>

upload.php:

<?php
$dir = "image/";
move_uploaded_file($_FILES["image"]["tmp_name"], $dir. $_FILES["image"]["name"]);
?>

Problem

UPDATE CODE BELOW I found some code that is able to upload an image and display its thumbnail. However, I would like to save the images to a particular folder as well. What jQuery code or ajax code can I use to save the original image to a folder of my choice? Here is the live demo: http://jsfiddle.net/dn9Sr/2/ Here is the full code: ``` <html> <head> <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script> <style> .input-file-row-1:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .input-file-row-1{ display: inline-block; margin-top: 25px; position: relative; } #preview_image { display: none; width: 90px; height: 90px; margin: 2px 0px 0px 5px; border-radius: 10px; } .upload-file-container { position: relative; width: 100px; height: 137px; overflow: hidden; background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat; float: left; margin-left: 23px; } .upload-file-container-text{ font-family: Arial, sans-serif; font-size: 12px; color: #719d2b; line-height: 17px; text-align: center; display: block; position: absolute; left: 0; bottom: 0; width: 100px; height: 35px; } .upload-file-container-text > span{ border-bottom: 1px solid #719d2b; cursor: pointer; } .one_opacity_0 { opacity: 0; height: 0; width: 1px; float: left; } </style> <script> $( document ).ready(function() { function readURL(input, target) { if (input.files && input.files[0]) { var reader = new FileReader(); var image_target = $(target); reader.onload = function (e) { image_target.attr('src', e.target.result).show(); }; reader.readAsDataURL(input.files[0]); } } $("#patient_pic").live("change",function(){ readURL(this, "#preview_image") }); }); </script> </head> <body> <form name="" method="post" action="#" class="feedback-form-1"> <fieldset> <div class="input-file-row-1"> <div class="upload-file-container"> <img id="preview_image" src="#" alt="" /> <div class="upload-file-container-text"> <div class = 'one_opacity_0'> <input type="file" id="patient_pic" label = "add" /> </div> <span> Add Photo </span> </div> </div> </div> </fieldset> </form> </body> </html> ``` UPDATE: I think I am on the right track. I am close but I don't know what data to send from the jQuery. I added a php scrit and its getting a call back as success but I am not sending the right var. I think if I just send the right val I can get it. CODE: ``` <script> $( document ).ready(function() { function readURL(input, target) { if (input.files && input.files[0]) { var reader = new FileReader(); var image_target = $(target); reader.onload = function (e) { image_target.attr('src', e.target.result).show(); $.ajax({ type:'POST', url: 'theUpload.php', data: input.files[0], success:function(data){ console.log("success"); console.log(data); alert(data); }, error: function(data){ console.log("error"); console.log(data); } }); }; reader.readAsDataURL(input.files[0]); } } $("#patient_pic").live("change",function(){ readURL(this, "#preview_image") }); }); </script> ```

Original source