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>