so I have a PHP iframe (ajax) file uploader. I would like to display a loading message when submit is clicked (easy on click event) and then once the file is uploaded, so when the iframe is loaded with the PHP response, vanish (jquery fadeOut) and an alert box pop up saying the file is uploaded. what would be the easiest way to go about this?
You can attach an event handler to load on the iframe and put your fade out logic in there.
Edit 2: Some sample code (changed from ready to load)
<iframe name="process"></iframe>
<form method="post" action="upload.php" target="process" enctype="multipart/form-data" onsubmit="Upload.start()">
<input type="file" name="file" />
<input type="submit" value="Upload" />
</form>
<script>
var Upload = function() {
$(function() {
$('iframe[name=process]').load(function() {
// finished uploading file
$('.loading-div').hide('slow', function() {
alert('Your file has been successfully uploaded.');
});
});
});
return {
start: function() {
$('.loading-div').show();
}
}
}();
</script>
Related
I am using this jquery script Show A Progressbar When Uploading A File - progress-upload.js to install a file upload progress bar in a form to be used with PHPMailer. Everything is working fine except that once the form is submitted, instead of redirecting to the form action file (ACTION="form-handler.php") it remains on the same page and the progress bar after reaching 100 resets to 0. The form is submitted and the file is also attached successfully but it does not redirect to "form-handler.php".
HTML Form:
<FORM METHOD="POST" ACTION="form-handler.php" name="case-history" id="case-history" enctype="multipart/form-data">
<input type="file" multiple="multiple" name="attach_file[]" id="file_att" class="file_upload" required>
<p><span id="file_error"></span>
<input type="submit" value="Submit" id="casehistory-submit">
</form>
Have placed this before the form:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous">
</script>
<script src="js/progress-bar/src/jquery-progress-upload.js"></script>
And placed this after the form:
<script>
$('#file_att').setProgressedUploader({
onInit: function (elements) {
// triggered on init
},
onGetFile: function (elements) {
// triggered on get file
},
onStartSubmitting: function (elements) {
// triggered when starting uploading
},
onProcessing: function (elements) {
// triggered when processing
},
onFinish: function (elements, data) {
// triggered on finish
},
onError: function(e){
// triggered on error
}
});
</script>
What else do I need to do, to go to "form-handler.php" after form submission. Perhaps some code in here:
onFinish: function (elements, data) {
// triggered on finish
},
but cannot figure out how.
try:
onFinish: function (elements, data) {
window.location.replace("PATH_HERE/form-handler.php");
},
I don't know how to explain this, but I will do my best...
I am trying to submit a form normally, but the request result will be displayed at a iframe. Everything goes fine to here. What I want to do (if it is possible) is to animate the form putting a message into it (like "sending...") ultil the iframe is load with the respose. I now this is so confuse, but take a look to my files:
index.php
I have ommited the header because is so obvius.
<form enctype="multipart/form-data" method="post" action="upload.php" target="my_iframe" id="form-upload">
Choose your file here:
<input name="uploaded_file" type="file"/>
<input id="send-button" type="submit" value="Subir imagen"/>
</form>
<IFRAME name="my_iframe" SRC="upload.php" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0"></iframe>
<script type="text/javascript">
$(document).ready(function(){
$('#send-button').sendImage({formid: "form-upload"});
});
</script>
upload.php
Just for testing porpuses.
<?php
if( isset($_FILES['uploaded_file']) )
echo "image sent";
animate.js
This is where I am dealing with that. Because when I access the index.php always the message sending... is showed instance of the form elements.
var conf;
jQuery.fn.sendImage = function(args) {
conf = $.extend( {
}, args);
this.on('click', function(e){
e.preventDefault();
$('#'+conf.formid).submit();
$('#'+conf.formid).html('sending...');
});
}
Once a form is submitted, all processing on the current page stops. Anything you do must be BEFORE you actually submit the form. You alternative is to submit via AJAX.
Once again a question...it's almost driving me crazy for hrs :-/
My problem:
I have an upload form on my website and the upload works fine. But I want to give the user a feedback while uploading, cuz it can take a few seconds depending on the file size.
I thought about showing a gif animated progress bar in a div and show it with javascript. I tried it, but it just won't show up when I'm hitting the submit button...and when I'm adding onSubmit=".... return false;" the upload won't work anymore...
here is my code:
in the head:
<script type="text/javascript">
function showHide() {
var div = document.getElementById('progressBar');
if (div.style.display == 'none') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
}
</script>
body:
<div id="progressBar" style="display:none;height:40px;width:250px;margin:0px auto;">
<img src="img/progressbar.gif" alt="Progress Bar">
</div>
<form name="photo" id="upload_big" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post" onsubmit="showHide();">
<input class="linkinput" type="file" name="image" size="20"/>
<input type="submit" name="upload" id="uploadbutton" value="Upload image"/>
I would appreciate any help...and since I'm a rookie -> please help me to get better instead of judging ;-)
Thanks out there!
It's because when the submit event has triggered, the browser already sent the form and will go to another page.
Use jQuery:
$(function() {
$('#upload_big').submit(function() {
showHide();
});
});
Sometimes, the form submission prohibits you from casting anymore JavaScript functionality on the page. To be on the safe side, you should also base functionality not on the form submission event, but on the <input type="submit"> click:
$(function() {
$('input#uploadbutton').click(function(e) {
showHide();
e.preventDefault();
});
});
I have atleast 50 fields in my html form and I have integrated flash file uploader for multiple file uploading.
Another reason of used for flash file uploader is we can't get filesize before uploading file in IE. for get the file size in IE i used flash.
EAflashuploader integration works successfully.
But my requirement is litle bit different.
In EAflashuploader there is upload button when you click on that all added file uploaded.
But I want to disable this upload button and upload file should be upload when i click on
Html submit button.
In short i want to upload files through submit button in html instead of upload button in flash.
when form submit i can get all the data in post method.
Project link : http://www.triggergmbh.com/EAFUpload/PHP/simpleupload.php
EAFlashUpload link : http://www.easyalgo.com/examples/eaflashupload/simpleupload.aspx
EAFlashUpload Doc link : http://www.easyalgo.com/support/docs/eaflashupload/
Javascript function
function doSendForm() {
EAFlashUpload.uploadFiles();
document.forms["id_form"].submit();
}
HTML code
<div style="width:450px;height:350;background:#EFEFEF;">
<form name="id_form" id="id_form" method="post" style="margin:0px;padding:0px;">
<div id="EAFlashUpload_holder"></div>
<script type="text/javascript" src="EAFUpload/swfobject.js"></script>
<script type="text/javascript">
var params = {
BGcolor: "#ffffff",
wmode: "window"
};
var attributes = {
id: "EAFlashUpload",
name: "EAFlashUpload"
};
var flashvars = new Object();
var uploadUrl = "simpleupload.php";
if (!document.all) {
uploadUrl = "../" + uploadUrl;
}
flashvars["uploader.uploadUrl"] = uploadUrl;
flashvars["viewFile"] = "EAFUpload/TableView.swf";
flashvars["view.uploadButton.visible"] = "false";
swfobject.embedSWF("EAFUpload/EAFUpload.swf", "EAFlashUpload_holder", "450", "350", "10.0.0", "EAFUpload/expressInstall.swf", flashvars, params, attributes);
function EAFlashUpload_onMovieLoad(errors)
{
if(errors != "")
alert(errors);
}
</script>
<p>First name: <input type="text" name="firstname"></p>
<p>Last name: <input type="text" name="lastname"></p>
<input type="submit" id="id_submit" name="submit" value="submit" onClick="doSendForm();" style="padding:10px;font-size:20px;">
</form>
</div>
EAFlashbutton seems to have flexible configuration options and a Javascript API.
You should be able to 1) hide the Flash upload button and 2) trigger the upload externally via Javascript.
1) hiding the button
Buttons have a visible property, so you should be able to hide them with something like this:
flashvars["view.uploadButton.visible"] = "false";
2) Triggering the upload
Use the uploadFiles() method of the Javascript API.
Let me know if anyone know what is the issue with this code.
Basically i want to upload a file using jQuery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(event) {
$('#form1').submit(function(event) {
event.preventDefault();
$.post('post.php',function(data){
$('#result').html(data);
});
});
});
</script>
</head>
<body>
<form id="form1">
<h3>Please input the XML:</h3>
<input id="file" type="file" name="file" /><br/>
<input id="submit" type="submit" value="Upload File"/>
</form>
<div id="result">call back result will appear here</div>
</body>
</html>
and my php 'post.php'
<?php
echo $file['tmp_name'];
?>
Uploaded File name is not returned back. Issue is i couldn't access the uploaded file.
Thanks in advance!
Shiv
Basically i want to upload a file using jQuery
You cannot upload files using AJAX. You could use the jquery.form plugin which uses a hidden iframe:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(event) {
$('#form1').ajaxForm(function(data) {
$('#result').html(data);
});
});
</script>
</head>
<body>
<form id="form1" action="post.php" method="post" enctype="multipart/form-data">
<h3>Please input the XML:</h3>
<input id="file" type="file" name="file" /><br/>
<input id="submit" type="submit" value="Upload File"/>
</form>
<div id="result">call back result will appear here</div>
</body>
</html>
Also notice the enctype="multipart/form-data" on the form.
Another possibility is to use the HTML5 File API which allows you to achieve that assuming the client browser supports it.
It's not possible to upload files with jQuery $.post, neverthless, with the file API and XMLHttpRequest, it's perfectly possible to upload a file in AJAX, and you can even know how much data have been uploaded yet…
$('input').change(function()
{
var fileInput = document.querySelector('#file');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/');
xhr.upload.onprogress = function(e)
{
/*
* values that indicate the progression
* e.loaded
* e.total
*/
};
xhr.onload = function()
{
alert('upload complete');
};
// upload success
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
// if your server sends a message on upload sucess,
// get it with xhr.responseText
alert(xhr.responseText);
}
var form = new FormData();
form.append('title', this.files[0].name);
form.append('pict', fileInput.files[0]);
xhr.send(form);
}
No no no, you should use a jQuery form plugin for async uploading files. You can't upload file with jQuery $.post method. The file will be uploaded with hidden iframe
Another way is to use HTML5 uploading with FileAPI/BlobApi
Your upload.php has some error.
you should change your this part.
echo $file['tmp_name'];
to:-
echo $_FILES['file']['tmp_name'];
Try uploading with an iframe because you can't send a file with $.post method.
You could also try jquery uploadify - http://www.uploadify.com/