Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Upload File using Aajx

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 233
    Comment on it

    Sometime you need to upload the image without refreshing the page , in that case you can upload the image with the help of ajx using FormData Objects .

    To achieve this lets create a form in HTML to upload the file.

      <div class="controls">
            <input id="fileInput" name="image-file" type="file">

    Now come to the javascript part where we will upload the image using ajax :-

    $("input[name='image-file']").on("change", function() {
    var files = !!this.files ? this.files : [];
    if (!files.length || !window.FileReader) return;
    if (/^image/.test(files[0].type)) {
        var reader = new FileReader();
        var fd = new FormData();
        fd.append('addImage', files[0]);
        reader.onloadend = function() {
                url: 'upload.php',
                data: fd,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data) {
                   console.log('image uploaded');

    In above javascript code we have send the image data when someone upload the image,

    Now lets write the php code in upload.php file.

    move_uploaded_file($_FILES["addImage"]["tmp_name"], "images");

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: