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>