I'm developing an application in ASP.NET that is designed to create reports and download them to the client. I'm doing this using an iframe that is posted to the server. Once operations are completed, the report is downloaded to the client using Response.Write().
In the meantime, on the client, I am displaying a GIF to indicate that the server is generating the report. When the report is successfully created and has finished writing to the client, I would like to update the iframe accordingly, and hide the GIF.
Is there any way of determining if the response.write() was successful in the iframe's parent page?
Parent:
<iframe id="iframe1" src="import-upload.html" width="100%" height="300" onload="loadFrame()" frameborder="0">
function redirect(type) {
iframe.getElementById('inputType').value = list.options[list.selectedIndex].value;
iframe.getElementById('inputAction').value = type;
document.getElementById("divOptionsContainer").style.display = "none";
document.getElementById("imgLoadingGif").style.display = "";
iframe.getElementById('frmUpload').submit();
}
Iframe Source:
<div align="center">
<form id="frmUpload" action="AjaxFileHandler.aspx" method="POST" enctype="multipart/form-data" target="_self" style="margin-bottom:20px;">
<input id="fileupload" type="file" name="files[]" />
<input type="hidden" id="inputAction" name="action"/>
<input type="hidden" id="inputType" name="type"/>
</form>
<button id="btnReport" type="button" onclick="parent.redirect('Report')" style="">Report</button>
<button id="btnUpload" type="button" onclick="parent.redirect('Import')" style="">Import</button>
</div>
This is my first post. Please let me know if more information is needed. Thanks in advance.
You can listen to onload event of iframe:
function redirect(type) {
iframe.getElementById('inputType').value = list.options[list.selectedIndex].value;
iframe.getElementById('inputAction').value = type;
document.getElementById("divOptionsContainer").style.display = "none";
document.getElementById("imgLoadingGif").style.display = "";
iframe.onload = function() {
document.getElementById("divOptionsContainer").style.display = "";
document.getElementById("imgLoadingGif").style.display = "none";
}
iframe.getElementById('frmUpload').submit();
}
Related
I want to upload a file to the server, so that another user can go onto the site, and search up the thing
It's going to take the file from the client, and put it into https://vidimax.elan1012549.repl.co/Videos/
or
Videos/
so ANY user can go in and see the video when the html retrieves the file
Videos/FILENAME.mp4
<input type="file" id="VIDEO">
<input type="submit" id="submit">
then, on another page, any user can access it with the search bar in
<input type="text" placeholder="Search" autofocus id="SearchBar">
<input type="submit" id="search" value="search" onclick="SetQuery(), GetQuery(), reload()">
<br> <br> <br>
<textarea id="ShowResultsFor"></textarea>
<br><br><br>
<div id="div">
<video src="Videos/" width="1080" height="720" controls id="Result2">
</video>
</div>
let Query;
let Video;
function SetQuery(){
var Search = document.getElementById("SearchBar");
Query = Search.value;
}
function GetQuery(){
document.getElementById("ShowResultsFor").value = ("Results for: " + Query);
Video = (Query + ".mp4");
document.getElementById("Result2").src = ("Videos/" + Video);
console.log(document.getElementById("Result2").src)
}
function reload(){
var container = document.getElementById("div");
var content = container.innerHTML;
container.innerHTML= content;
//this line is to watch the result in console , you can remove it later
console.log("Refreshed");
}
I specifically cannot use PHP because the browser just downloads the .php file, as it does not support php
and I wish for this to work on most browsers
edit: I found a method with python
I'm working on a webapp locally and I have a 'settings' page. The user can change the variables and the Javascript is supposed to save the values but it seems to reset them back to 1 straight after it changes them.
HTML:
<body onload="getSettings()">
<h1>Instance Load Manager - Settings</h1>
<div id="uploader">
<h2>Terraform file upload:</h2>
<input type="file" id="file" name="files[]" multiple onchange="moveFile()" />
</div>
<a href="index.html">
<div id="settingsButton">
<h3>Back</h3>
</div>
</a>
<div id ="settingsForm">
<form>
Maximum instances:<br>
<input type="text" id="maxInst" name="max instances"><br>
<br>
<input type="submit" value="Save Changes" onclick="updateSettings()">
</div>
</body>
Javascript:
var maxInstances = 1;
function updateSettings()
{
maxInstances = document.getElementById("maxInst").value;
alert(maxInstances);
}
function getSettings()
{
document.getElementById("maxInst").value = maxInstances;
}
Help appreciated :)
You need to prevent your page from refreshing after submitting the form.
function updateSettings(e)
{
e.preventDefault();
maxInstances = document.getElementById("maxInst").value;
alert(maxInstances);
}
I'm using the following WIZWIG editor "http://js.nicedit.com/nicEdit-latest.js" posting into the below HTML form. I want to control the size of images that are uploaded. Image size should be something like 200px height, 300px width. I've tried CSS, HTML & JavaScript to no avail. Can't figure this out...
<style>
.nicEdit-main{
background-color: white;
}
</style>
<script type="text/javascript" src="http://js.nicedit.com/nicEdit- latest.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas({buttonList : ['bold','italic','underline','strikeThrough','html','forecolor','link','upload','unlink','removeformat']}) });
</script>
<form name="comments" action="<?php echo $_SERVER['PHP_SELF']; ?>"method="post" onsubmit="return checkForm();">
<?php if ($isGuest) { ?>
Comment:<br><br>
<div style="background: #fff;">
<textarea style="width: 100%;" name="comment" cols="111px" rows="4">disabled for guest account</textarea>
</div>
<input type="submit" name="action" disabled value="Add Comment" />
<?php } else { ?>
Comment:<br><br>
<div style="background: #fff;">
<textarea style="width: 100%;" name="comment" cols="111px" rows="4"></textarea>
</div>
<input type="submit" name="action" value="Add Comment" />
<?php //header("Location: test.php");
} ?>
</form>
Although this was not possible few years ago(you had to send the file to the server side to be able to process file information) now it is do possible with the FileReader() object and pure JS.
You use the .files[0] to get the file then create a temporary img object on the DOM(to be able to do the process) and then assign the file to that DOM object(with the help of FileReader())and then you just compare the file width or height. This is an example how you can do it:
imgfile.onchange = function(e) {
var oFile = document.getElementById("imgfile").files[0]; //Get the selected file by the user
var img = document.getElementById("imgdom"); //get the reserve image element on the dom to be able do all our processing with this object type
document.getElementById("imgdom").style.display = "none";//This is optional if you want to show or not the image to the user
var reader = new FileReader(); //This is the magic object that allows you to process a file on the client side
reader.onload = function (e) {
console.log(e.total); // file size
img.src = e.target.result; // putting file in dom without server upload.
alert(img.width);
//Do what ever condition you want here
//if img.width > 200 do this, else do that
};
reader.readAsDataURL(oFile );
//return false;
};
<form method="post" enctype="multipart/form-data" onsubmit="return false;">
<input type="file" name="imgfile" id="imgfile">
</form>
<div>
<img id="imgdom" src="" />
This issue has been resolved with the following CSS Code:
.nicEdit-main img {
width: 350px;
}
img[src*="http://somedomain.com"] {
width: 350px;
}
Thanks to all who commented...
i have this in left frame and i want the result in other frame and i tried a lot but nothing work for me , any help with that?
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('datepicker').value;
window.location = "http://example.com";
}
</script>
<p><b><font color="#FF0000" size="4">Date:</font></b>
<input type="text" id="datepicker" size="20" name="datepicker" value="Date Field" maxlength="8"><input type="submit" value="submit" onclick="goToPage();" /></a></p>
You need a reference to the iframe where you want to load the url.
Assuming your target iframe id is 'targetIframe' and that jQuery is loaded on all iframes, you could do this from another iframe:
var iframe = window.top.$('#targetIframe');
iframe.attr('src', url);
You could also do:
iframe.contentWindow.location = url;
I want to upload file and idno using iFrame concept using PHP. I used this code with my project.
This code alone is working fine. The file is uploading. But when it is in my project, it is not working. It showing
undefined index myfile
(I always test in Firefox browser.)
Even an extra parameter idno is also not sending...
But in the same page HTML5 Drag and Drop is working.
any Help?
Here is my code:
<form method="post" action="Nupload.php" enctype="multipart/form-data" class="manual" id="upload_form" target="upload_target">or
<input type="file" name="myfile" id="myfile" style="display:none" onchange="javascript:getReady();" />
<label for="file">select files from your computer...</label>
<input type="hidden" name="idno" value="2013456" />
<iframe src="Nupload.php" name="upload_target" id="upload_target" style="display:none;">
</iframe>
</form>
Script:
function getReady()
{
document.getElementById("upload_target").onload = uploadDone();
document.getElementById("upload_form").submit();
}
function uploadDone()
{
var content="";
var iframeId=document.getElementById("upload_target");
if (iframeId.contentDocument) {
content = iframeId.contentDocument.body.innerHTML;
} else if (iframeId.contentWindow) {
content = iframeId.contentWindow.document.body.innerHTML;
} else if (iframeId.document) {
content = iframeId.document.body.innerHTML;
}
alert(content)
}
upload.php
if( isset($_FILES["myfile"]) )
{
$target = basename($_FILES["myfile"]["name"]);
if(move_uploaded_file($_FILES["myfile"]["tmp_name"],"./temp/".$target))
{
$res = array("success"=>true,"file_name"=>$_FILES["myfile"]["name"],"size"=>$_FILES["myfile"]["size"]);
}
else
$res = array("success"=>false,"desc"=>"no");
echo json_encode($res);
}