Sending files and other values together without using form in HTML5 And jQuery

Advertisemen

If you don't want to use form tag in html but want to send files and other values together, here is the easiest way to do this.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title> 
    <script src="https://ajax.googleapis.com/ajax
                  /libs/jquery/3.1.1/jquery.min.js">
</script>
</head>
<body>
<div>
    <input type="text" placeholder="Enter your name"
               id="name">
    <input type="text" placeholder="Enter Company Name"
                id="companyName">
    <input type="file" id="imgFile"> 
    <button onclick="submintSurvey()">
                Submit Survey</button>
</div>
<script>
    function submintSurvey()
    { 
        var imgFile = document.getElementById("imgFile")
                      .files[0];
        var name = document.getElementById("name").value;
        var companyName = document.getElementById
                        ("companyName").value;
var fData = new FormData();
        fData.append("imgFile", imgFile);
        fData.append("name", name);
        fData.append("companyName", companyName);
        $.ajax({
            url : "/serverName/Ajax_fileName.php",
type: 'POST',
data: fData,
contentType: false,
processData: false,
success: function (data)
            { 
               alert(data);
            }        
       });
    }
</script>
</body>
</html>



Advertisemen

Disclaimer: Gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini.

Tidak ada komentar:

Posting Komentar

© Copyright 2017 Tutorial Unity 3D