Scribd Logo
Upload

Welcome to Scribd!

  • Practical-7: Aim: HTML Code

    Uploaded by

    PATEL POOJAN
    16 views5 pages
    This document provides code for an asynchronous JavaScript application that loads and displays an HTML file on a webpage. The HTML code defines a form for uploading files. The CSS styles the form. The JavaScript code handles the form submission asynchronously using AJAX. It calls a PHP file that processes the uploaded file, moving it to an uploads folder if the file type is allowed. If successful, it returns a success message.

    Original Description:

    Original Title

    Practical-7

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides code for an asynchronous JavaScript application that loads and displays an HTML file on a webpage. The HTML code defines a form for uploading files. The CSS styles the form. The JavaScript code handles the form submission asynchronously using AJAX. It calls a PHP file that processes the uploaded file, moving it to an uploads folder if the file type is allowed. If successful, it returns a success message.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    16 views5 pages

    Practical-7: Aim: HTML Code

    Uploaded by

    PATEL POOJAN
    This document provides code for an asynchronous JavaScript application that loads and displays an HTML file on a webpage. The HTML code defines a form for uploading files. The CSS styles the form. The JavaScript code handles the form submission asynchronously using AJAX. It calls a PHP file that processes the uploaded file, moving it to an uploads folder if the file type is allowed. If successful, it returns a success message.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    AWP-SEM-6 190160116044

    Practical-7
    Aim: Write a JavaScript to loads and display  HTML file on webpage
    using  Asynchronous Programming. 

    Html Code:
    <!DOCTYPE HTML>
    <!DOCTYPE html>
    <html>
    <head>
      <title>File Upload</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class="container">
    <form  method="post" enctype="multipart/form-data" id="uploadFile">
        <input type="file" name="file" class="yash">
        <input type="submit" value="Upload Now" name="submit" class="yash">

       
    </form>
    <div id="alerBox"></div>
    </div>
    <script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="ajax_script.js"></script>

    </body>
    </html>

    Css Code:
    @import url('https://fonts.googleapis.com/css2?
    family=Mochiy+Pop+P+One&family=Neonderthaw&display=swap');
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container{
        background-color: aquamarine;
    AWP-SEM-6 190160116044

        display: flex;
        height: 100vh;
        flex-direction: row;
        font-family: 'Mochiy Pop P One', sans-serif;
        justify-content: center;
        padding-top: 50px;
    }
    .yash{
        font-family: 'Mochiy Pop P One', sans-serif;
    }
    input file{
        font-family: 'Mochiy Pop P One', sans-serif;
    }

    Js Code:
    $(document).on('submit','#uploadFile',function(e){
        e.preventDefault();
       var formData = new FormData(this);
        $.ajax({
        method:"POST",
        url: "upload.php",
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
         beforeSend:function(){
         $('button[type="submit"]');
       },
        success: function(data){
       
        $('button[type="submit"]');
       
         $('#alertBox').html(data).fadeIn();
      }
           
    });
      });
    AWP-SEM-6 190160116044

    Php code:
    function upload_file(){
        $uploadTo = "uploads/";
        $allowFileType = array('jpg','png','jpeg','gif','pdf','doc');
        $fileName = $_FILES['file']['name'];
        $tempPath=$_FILES["file"]["tmp_name"];
       
        $basename = basename($fileName);
        $originalPath = $uploadTo.$basename;
        $fileType = pathinfo($originalPath, PATHINFO_EXTENSION);
        if(!empty($fileName)){
         
       
           if(in_array($fileType, $allowFileType)){
         
             if(move_uploaded_file($tempPath,$originalPath)){
              echo ( $fileName. " was uploaded successfully");
             
             
              }else{
                echo ("File Not uploaded ! try again");
              }
          }else{
             echo $fileType." file type not allowed";
          }
       }else{  
         echo "Please Select a file";
       }      
    }

    ?>
    AWP-SEM-6 190160116044

    Output:
    AWP-SEM-6 190160116044

    You might also like