Problem uploading a .gif file when updating php page?

Question

Problem uploading a .gif file when updating php page?

Navigation

#1 by (1 votes)

1

I have a problem in my code to load a gif when updating a page the gif until it appears more does not leave it running straight. Can anyone help me?

Here's my javascript:

<script>
     $(document).ready(function(){
            $("#loadimg").fadeOut("slow");
        });
</script>

Here's my css:

 <style>
        #loadimg {
            position: absolute;
            left: 0px;
            top:0px;
            margin:0px;
            width: 100%;
            height: 100%;
            display:block;
            z-index: 9999997;
            opacity: 0.65;
            -moz-opacity: 0.65;
            filter: alpha(opacity = 65);
            background: black;
            background-image: url("../images/loaders/ajax-loader.gif");
            background-repeat: no-repeat;
            background-position:50% 50%;
            text-align: center;
            overflow: hidden;
            font-weight: bold;
            color: white;
            padding: 2%;
        }
        #TablaForm{
            margin-top: 100px;
        }
        label{
            font-size: 20px;
        }
        .titulo{
            font-size: 20px;
        }

        table{
            width:600px;
            height:300px;
            padding: 10px;
        }

        #fileToUpload{
            width:300px;
        }

        #typeFile{
            width:300px;
        }

    </style>

Here is my html:

<body onLoad="init(); document.getElementById('typeFile').focus();">
<div id="loadimg" class='center' align="center" style="position:absolute; width:100%; height: 100%; text-align:center; background-color:rgba(0,0,0,0.4);">
    <br><br><br><br><br><br><br><br><br>
    <img src="img/ajax-loader.gif" width="200px" height="200px"  border=0 >
</div>


<div id="conteudo">
<div class="tabcontentstyle" style="WIDTH: 100%">
    <div id="tcontent1" class="tabcontent">
        <center>
<form action="update_yield.php" method="post" enctype="multipart/form-data">

    <table id='TablaForm'>
        <tr>
           <td colspan="2" align="center" class="titulo">Form Upload Files</td>
        </tr>
        <tr>
            <td>
               <label for='Rate'>File Type</label>
            </td>
            <td>
                <select name='typeFile' id='typeFile' class='typeFile'>
                    <option value='1' selected>WEEK REPORT [WEEK.xls]</option>
                    <option value='2'>WEEK REPORT [WEEK.csv]</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
               <label for='file'>File</label>
            </td>
            <td>
                <input  type="file" name="fileToUpload" id="fileToUpload" />
            </td>
        </tr>
        <tr>
            <td>
               <label for='submit'>Send</label>
            </td>
            <td>
                <input type="submit" value="Upload" id='submit' class='submit' name="submit">
            </td>
        </tr>
    </table>

</form>
</center>
</div>
</div>
</div>
</body>
</html>

javascript html jquery css

asked by anonymous 16.05.2016 / 15:55

1 answer

How do I extract the field values from a javascript Object (JSON)? Select something that contains brackets in the name in a JavaScript function

score 1 · Answer 1

Apparently the problem is that when the GIF is displayed it has to be loaded and the page elements as well. Then the browser crashes and the GIF is not animated in a fluid way. What you can do is to give GIF some time to cheer up. who knows ...

<script>
    $(document).ready(function(){
        setTimeout(function() { $("#loadimg").fadeOut("slow"); }, 1000);
    });
</script>

This will make it wait another second after everything is loaded and at this time the GIF will animate.