chaitu11 0 Junior Poster

Code:

<div class="container">
    <div id="preview"></div>
    <form id="form" method="post" enctype="multipart/form-data">
    <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Title</label>
      <div class="col-md-9">
        <input name="title" placeholder="Holiday" class="form-control" type="text">
      </div>
    </div>
    </div>
    <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Image1</label>
      <div class="col-md-9">
        <input type='file' name='image1' class='form-control'>
        <img class="image1 img-thumbnail" style="display:none" alt="image1" width="100" height="100" /> </div>
    </div>
    </div>
    <div class="form-body">
    <div class="form-group">
      <label class="control-label col-md-3">Image2</label>
      <div class="col-md-9">
        <input type='file' name='image2' class='form-control'>
        <img class="image2 img-thumbnail" style="display:none" alt="image2" width="100" height="100" /> </div>
    </div>
    </div>

    <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
    </form>
    <div id="err"></div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

    <script type="text/javascript">
    function save() 
    {
        $.ajax
        ({
            url: "ajax.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend : function()
            {
                $("#err").fadeOut();
            },
            success: function(data)
            {
            if(data=='invalid file')
            {
                $("#err").html("Invalid File !").fadeIn();
            }
            else
            {
                $("#preview").html(data).fadeIn();
                $("#form")[0].reset(); 
            }
            },
            error: function(e) 
            {
                $("#err").html(e).fadeIn();
            }          
        });
    };
    </script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.