I have a simple html form in a .asp page. I would like add a field to let users upload files via the form on my server/ftp on the fly. Any suggestions on how I can do this please?
this is the code I am using for the HTML
<form name="formUpload" id="formUpload" method="post" enctype="multipart/form-data" action="">
<table valign="top" align="left" bgcolor="PaleGoldenRod" width="300px" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="PaleGoldenRod" valign="top">
<td width="300px">
<input type="file" size="50" name="file1">
<input type="submit" name="submit" value="Upload File">
</td>
</tr></table></form>
I have no idea how to do this because I never had done something like this.
You could try the following jQuery plugin to handle 'on the fly' uploads:
jQuery File Upload
But like Symeon said, you will need an ASP Classic component that will handle the file uploads on the server. I used the FreeASPUpload version a couple of times, works like a breeze.
In ASP you have to write your own upload handler to take the http stream and write it to disk - there is plenty of example code on the web. I have some, but it is a bit big to post here.
Look at this or this
HTH
Related
I am using dropzone.js to implement file upload. I am using it to make a web compiler. Using php/ajax I want to show the contents of the file in the editor text area without saving the file in the server.
My current code snippets are-
<form role="form">
<textarea id="editor">
<?php if( isset( $data['source'] ) )
echo $data['source']; ?></textarea>
</form>
` <form class="dropzone dz-clickable" action="upload.php" enctype='multipart/form-data'>
<i class="fa fa-cloud-upload element"></i>
<div style="color:gray;">Drag and drop or click to upload file</div>
<input type="hidden" name="filenameEmail" class="filenameEmail" value="">
<input type="hidden" name="side" value="front">
</form>`
with the bit of code provided it's a bit hard to get to a proper solution fitting your needs.
generally (and as you asked for only an idea of how you could do it) however, I'd go with using the success event from dropzone.js which provides the server response as the second parameter according to there Documentation.
So what you do is reading out the data from the uploaded file using your upload.php and returning it so you can use it in the told event.
Easiest way (as always) is using jQuery with it to have full control of the response and assign the provided text/code/whatever to the
$('#editor').val();
The client has a section of her site that is not navigable through any other pages. To get to these pages she wants the user to fill out this form. It's a non-for-profit, so she basically just wants to see how many people are getting to these pages that have a product available for free so she can report on that. So there is a page with a form. She wants the user to submit the form and then be re-directed to another page. Normally I would do this really easily with PHP but unfortunately she hosts the site through some local fools and they don't support PHP
So the question is, how do I get this form to submit to her email, then redirect to a different page (videos.html) from the current page with the form (video-form.html)?
I have this form:
<form id="myForm" action="mailto:mail#mail.net" method="post" name="VideoFormAction">
<table cellspacing="1" cellpadding="1" width="46%">
<tr>
<td valign="top" class="shade1"><font color="red"><b>*</b></font> Email Address</td>
<td valign="top"><input type="text" name="Mail" value="" size="30"></td>
</tr>
<tr>
<td valign="top" class="shade2">Name</td>
<td valign="top"><input value="" name="Name" type="text" size="30" maxlength="100"></td>
</tr>
<tr>
<td valign="top" align="center">
<font color="red"><b>*</b></font> = required field
</td>
<td valign="top">
<button class="button">Submit</button>
</td>
</tr>
</table>
</form>
I have tried some javascript:
<script>
document.getElementById("myForm").onsubmit = function() {
setTimeout(function(){
window.location.href = "http://www.funducate.net/videos.html";
}, 1);
};
</script>
Which for whatever reason will not work. I have found multiple suggestions through search to try many different variations of the above, all of which failed. The last ditch effort was even putting a timeout into it as you see above. I imagine it doesn't work because the submit button performs the action="" and then doesn't continue.
Are there any other alternatives? Remember, I can't use PHP (i know it's ridiculous but it's what I got)
You could read the form values via either jQuery or javascript, save them to variables, construct a message body and email the form contents.
See below for more information:
How to send an email from JavaScript
More information on Mandrill
After sending the email, redirect the page as you have done (correctly) in your code -- but without the setTimeout.
I'm new to Wordpress and new to JQuery, so let me start off explaining what I am trying to do.
I have an admin page, inside this page I'm giving the user the ability to upload an image. I want this done using Ajax (independent from the general form update).
Here is the code I have so far:
At top of page - script includes:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js">
I can confirm these scripts are "pingable" and work.
Now the HTML code :
<table width="100%">
<tr>
<td width="100" style="padding:10px" valign="top">Email Image (180x180):</td>
<td style="padding:10px"><img id="previewEmailImage" width=180 height=180>
</td>
</tr>
<tr>
<td></td>
<td>
<div id='emailpreviewloader'>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<form id="imageform" method="post" enctype="multipart/form-data" action="/ajaximage.php">
<input type="file" name="photoimg" id="photoimg" />
</form>
</td>
</tr>
</table>
The key things in the HTML is a) a form and b) The div emailpreviewloader.
Now just after the html table, inline I have the following js:
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#emailpreviewloader").html('');
$("#emailpreviewloader").html('<img width="180" src="/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(function(result)
{
alert("Thank you for your comment!");
});
});
});
</script>
for testing purposes ajaximage.php just contains 1 line: Echo "It worked";
So assuming I've done my job right, and the html + js above is correct, it would seem Wordpress might be hijacking the Ajax somehow and preventing it from working as expected. Is this possible?
All I want to do is have a regular Ajax post, how is this possible?
EDIT:
What is working:
The change event for the file upload control is firing. I've confirmed this with an alert, and the loader.gif is visible. But it would seem the form isn't firing, or not firing correctly. The inner alert, never fires.
If you don't want to use wordpress's functions for ajax calls, try sending the form to action="<?php bloginfo('template_url');?>/ajaximage.php" and make sure the file is in the root of your wordpress instalation.
I need to display an upload progress indicator on a webpage interface for a client using an embedded Microchip TCP/IP stack Pic32 board. In the webpage, I have an upload file page that lets the client browse and select the appropriate .hex or .wav file to upload to the board memory, and thus be able to eventually bootstrap that file. My problem is that when the file is uploading, the client is unaware of the progress the file is making, and might navigate from the page, and thus cancel download. I need an indicator to show the progress of the upload in order to keep the client informed. Keep in mind I have 5 upload boxes for the different instances needing to be uploaded. I only allow 1 upload at a time.
here is the code for html section:
<table width="900" border="0" cellpadding="1" class="uploadTable">
<tr>
<td width="420" rowspan="2"><form action="fileupload.html" method="post" enctype="multipart/form-data">
<div class="uploadBox">
<p><b>Update Primary System Firmware</b></p>
<p>File:
<input type="file" name="firmwaremain" size="30" />
<input type="submit" value="Upload" />
</p>
</div>
</form></td>
<td width="252" height="23"><div align="center"><strong>Current File Name: </strong></div></td>
<td width="104"><div align="center"><strong>Current File Size:</strong></div> </td>
<td width="104"><div align="center"><strong>File Upload Date:</strong></div></td>
</tr>
<tr>
<td height="40"><div align="center">~curFirmName~</div></td>
<td width="104"><div align="center">~curFirmSize~</div></td>
<td width="104"><div align="center">~curFirmDate~</div></td>
</tr>
</table>
I have the Microchip customHTTPApp.c code available, but it is too cumbersome to post here.
I can email if needed, or chat. I don't have the rep to post pictures, and my web interface site is in a standalone board, so no links.
Thank you in advance for the help!
-Josh
A basic outline/idea:
Use a JavaScript timeout to poll a URL every N seconds: setTimeout(1000*N), "getProgress()");. This is called from onchange for your type="file" input tag
Your JS getProgress function makes an Ajax request to a URL: http//localhost/uploadProgress
Your JS getProgress function also calls setTimeout again on itself (same code) if
the file is not finished uploading.
Your progress URL returns the currently uploading file
progress in percentage (bytes perhaps?) as a JSON string: {progress:"50"}
Have a DIV of N pixels width id="progress-complete" and a
nested DIV id="progress" with width equal to the percentage value
returned by your Ajax call
Let me know if I can expand on that if it's helpful. I'm just posting this in the case you need somewhere to get started.
Today I was trying to send files via Ajax request using the JQuery AjaxForm plugin. However, it doesn't fire the success function as it uploads the file without any javascript run time or compile time error.
Here is my code:
<table id="haberresmiekle">
<form action="action.asp?kmt=resimyukle" method="post" enctype="multipart/form-data" id="haberresmiekleform">
<tr>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td><input id="b" type="submit" value="Gonder"></td>
</tr>
</form>
</table>
and
<script>
$("#haberresmiekle").dialog({autoOpen:false,title:"Resim Yukle"});
var options={
target:"#haberresmiekle",
success:function(){alert('x');$("#haberresimekle").dialog('close');}
};
$("#haberresmiekleform").ajaxForm(options);
$("#b").button();
</script>
Thanks for any help
Note: It has been resolved.
Yor script will do nothing(except in IE) as long as you dont use valid selectors.
$(haberresmiekleform)-> $('#haberresmiekleform')
$(haberresmiekle) -> $('#haberresmiekle')
$(button) -> $('#button')