locked
clear/reset xmlhttprequest and form data RRS feed

  • Question

  • User-352524747 posted

    Hi,

    i use XMLHttpRequest to upload files. Below is all the code i use to upload from a modal window. 

    <span><a href="#" id="modchart-d">Insert chart</a></span>
    
    <script type="text/javascript">
        $(document).ready(function ()
        {
    
    // modal charts //
    (function (hpeduinvest, $, undefined) {
    
        $(function () {
            $('#modchart-d').bind('click', function () {
                $('#chart-d').css({
                    'min-height': '500px',
                    'left': '0px',
                    'right': '0px',
                    'top': '0px',
                    'margin-left': 'auto',
                    'margin-right': 'auto',
                    'display': 'block'
                }).show();
            });
        });
    }(window.hpeduinvest = window.hpeduinvest || {}, jQuery));
    // end modal charts //
    
        // upload file
    
        function fileSelected()
        {
            var file = document.getElementById('fileToUpload').files[0];
            if (file && file.type == "image/png")
            {
                var fileSize = 0;
                if (file.size > 1024 * 1024)
                    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else
                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
                document.getElementById('message').innerHTML = 'File name: ' + file.name + '<br>' + 'File size: ' + fileSize;
            }
            else
            {
                document.getElementById('message').innerHTML = "Please select .png files";
            }
        }
    
        function uploadFile()
        {
            var file = document.getElementById('fileToUpload').files[0];
            if (file && file.type == "image/png")
            {
                var fd = new FormData();
                fd.append("fileToUpload", file);
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", uploadProgress, false);
                xhr.addEventListener("load", uploadComplete, false);
                xhr.addEventListener("error", uploadFailed, false);
                xhr.addEventListener("abort", uploadCanceled, false);
                xhr.open("POST", "/pages/ajax/upload");
                xhr.send(fd);
            }
        }
    
        function uploadProgress(evt)
        {
            if (evt.lengthComputable)
            {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
                document.getElementById('progressn').value = percentComplete;
            }
            else
            {
                document.getElementById('progressNumber').innerHTML = 'unable to compute';
            }
        }
    
        function uploadComplete(evt)
        {
    
            $('#updata')[0].reset();
            $('#insertchart').show();
            $('#insertchart').click(function ()
            {
                var txt = $('#Content').val();
                var cur_pos = $('#Content').getCursorPosition();
                var htmlString = '<img src=\"/charts/' + evt.target.responseText.replace(/\r?\n|\r/g, "") + '\" alt="Chart">';
                if (cur_pos != 0)
                {
                    $('#Content').val(txt.substring(0, cur_pos) + " " + htmlString + " " + txt.substring(cur_pos));
                }
                else
                {
                    $('#Content').val(htmlString + " " + txt);
                }
                $('#chartname').val(evt.target.responseText.replace(/\r?\n|\r/g, ""));
                return false;
            });
        }
    
        function uploadFailed(evt)
        {
            alert("There was an error attempting to upload the file.");
        }
        function uploadCanceled(evt)
        {
            alert("The upload has been canceled by the user or the browser dropped the connection.");
        }
    </script>
    
    <div id="chart-d">
            
            Upload chart 
            <form enctype="multipart/form-data" method="post" action="" id="updata">
                <input type="file" id="fileToUpload" accept="image/png" onchange="fileSelected();">
                <a href="#" onclick="uploadFile()">Confirm upload</a>
            </form>
    
            <span id="progressNumber"></span>
            <progress id="progressn" max="100" value="0"></progress> 
    
            <div id="message"></div>
        
       
            <a href="#" id="insertchart" onclick="$('#chart-d').hide();" style="display: none">Insert chart</a>
    
            <a href="#" onclick="$('#chart-d').hide();">Exit</a>
        </div>
    

    I'm looking for a function to reset or clear the entire data (reset XMLHttpRequest) or open the new window as the page was first loaded if this links are clicked:

    <a href="#" id="insertchart" onclick="$('#chart-d').hide();" style="display: none">Insert chart</a> 
    <a href="#" onclick="$('#chart-d').hide();">Exit</a>

    Friday, January 31, 2014 6:48 PM

Answers