Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery / ajax upload image and save to folder

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>
like image 613
Papa De Beau Avatar asked Jan 28 '14 06:01

Papa De Beau


People also ask

How to upload image file using jQuery Ajax?

In PHP you can easily upload any type file on the server using move_uploaded_file() method. But it requires form submit for uploading the selected file. If you want to store image file and display preview without reloading the whole page then you need to use jQuery AJAX.

How to store an image file and display preview using jQuery?

If you want to store an image file and display preview without reloading the whole page then you need to use jQuery AJAX. Send the selected file using the FormData object in the AJAX request. 1. HTML Create a <form > element where added <img >, file element, and a button. Image preview display in <img> after successfully upload using jQuery.

How to upload form data using Ajax?

On the upload button click get the selected file and create a FormData object. Check if a file is selected or not. If not selected then alert ("Please select a file.") otherwise, append files to 'file' key in fd. Send an AJAX request where pass the fd object as data and on successful callback check the response is 0 or not.

How to add image to form using jQuery?

Create a <form > element where added <img >, file element, and a button. Image preview display in <img> after successfully upload using jQuery. 2. CSS Hide the img element. 3. PHP Create an upload.php file and upload folder to store image files. Read file extension. Initialized $valid_extensions Array with image extensions.


3 Answers

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"]);
?>
like image 193
johnpong Avatar answered Oct 20 '22 18:10

johnpong


John's answer is good but file = input.files[0] doesn't work for me

file = input[0].files[0]

works.

like image 34
Terry Lin Avatar answered Oct 20 '22 19:10

Terry Lin


You need a server side language to store the uploaded image to specified folder. PHP is one of them, so I highly recommend to take a look of it.

AJAX is just for executing server side calls without refreshing the page.

like image 1
B_CooperA Avatar answered Oct 20 '22 18:10

B_CooperA