I want to add an avatar image upload feature to my project, and I was wondering if there exists any AJAX/jQuery solution for uploading an image without needing to refresh the page after uploading (the image uploads automatically).
I have used http://www.uploadify.com/ in several projects and it works great.
Apparently this can do it, haven't tried it yet.
http://www.plupload.com/
You could use an iframe as target, to avoid full page reload:
<form method="post" action="your_action" enctype="multipart/form-data" target="myIframe">
<input type="file" name="image" />
<input type="submit" value="Upload image" />
</form>
<iframe name="myIframe" id="myIframe">
//Post response will load here
</iframe>
trying update panel with a trigger DOES NOT WORK !!
DOESNT NOT WORK:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Repeater ID="rpUploadedImages" runat="server">
<ItemTemplate>
<img src='../Images/<%# DataBinder.Eval(Container.DataItem, "ImagePath")%>'/><br />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnupload" EventName="click" />
</Triggers>
</asp:UpdatePanel>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Button ID="btnupload" runat="server" Text="Upload" onclick="btnupload_Click" />
DO WORK:
so you have to go with placing the whole FileUpload tag in a separate page, and call it in iframe in your main page, and of course keep the "Upload" button in the iframe; so by click on the upload button the iframe alone will refresh without refreshing the whole page.
(well tested)
Related
I have a form which submits a php file to an iframe.
Here is the form:
<form action="del.php" method="post" target="output" >
Server: <input type="text" name="server_id" value="" />
Name:<input type="text" name="name" value="" />
Password:<input type="password" name="password" value="" /> <br>
Create Log? <input type="checkbox" name="log" value="" />
Output list of files? <input type="checkbox" name="out" value="" /><br>
<input type="submit" name="delete" value="Delete FTP!" /></td><br>
<iframe id="output" ></iframe>
del.php deletes files on a romote ftp. That recursive funcion takes a while.
Now I want to show a loading image by loading the del.php to the iframe.
I hope this answer helps you or anyone else looking for a solution. This one worked for me.
I'm trying to do the same. I have a page that calculates shipping on an iframe and i want it to show a loading gif image while the shipping cost loads as an xml from my shipping provider.
The IFRAME is covered with a DIV where the loading image (or any image) is found. The image is at the center of the DIV area and its size can be up to 950x633 pixels. When the IFRAME page is loaded, the loading image will be hidden.
What you need to change is the image URL for your site. You might also want to change the DIV background color (currently set to #FFF).
<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text- align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>
This worked for me. It shows a loading Gif animation before the page is loaded in my iframe box. :)
I am developing a social website.In the user registration page,user has the provision to add his photo.I have done this with little effort.My problem is that I want to display the image which has been uploaded by the user to a div,before clicking the submit button at the end of the form.I have searched a lot,but couldn't get the right one.
My html code is like this:
<img src="<?php echo $row_picture;?>" name="picture" class="settingspic" width="75" height="91" alt="profile pic" name="picture"/> Upload</li>
<input type="file" name="file" id="file" style="display:none;" />
My jasvascript code is:
function uploadimg()
{
var uploader = document.getElementById('file');
uploader.click();
return false;
}
You have to make a Ajax call to fetch the uploaded image instantly .
Reference URL => http://www.finalwebsites.com/demos/php_ajax_upload_example.php
Jquery File Upload plugin is the one that you want.
http://blueimp.github.com/jQuery-File-Upload/
this will help because in above plugin as you asked "before submitting form you want to show image in div" this plugin working that way.
try it
here many plugins r present, I guess most of them wil be useful for your project
http://www.jquery4u.com/plugins/10-jquery-ajax-file-uploader-plugins/
I want to attach a file to a message similar to face-book messaging.
on clicking the attach button, the browse window should open.
and on selecting the file, the file must upload and in that page it self it must show the file name.
if the user wants, it should be possible to remove that item.
please anybody help.
Google returns null.
me created a form.
<input type="submit" id="upload" value="$" style="margin-left: -10px;" onclick ="javascript:document.getElementById('file').click();" />
<form >
<input name="file" id="file" size="1" type="file" style="visibility: hidden; width: 1px;height: 1px;float: left;" onchange="this.form.submit()" />
</form>
You need to send the file upload, to a script on your server in an ajax request.
Maybe you should try a jQuery plugin which fits your needs.
Here is a nice list of uploader plugins: http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/
PHP - File Upload on tizag.com
I have a form HTML and users can upload a image to make screenshot to preview.
<form id="myForm" action="message.php" method="post">
Screenshot: <div class="show_image"></div> <br />
<input type="file" name="name" /> <br />
<input type="submit" value="Submit Comment" /> <br />
</form>
I also refer some articles on Internet but I don't know the way to do it. Can you give me some solutions or ideas ?
Thank you !
what is the plugin you are using? Almost the AJAX_UPLOAD plugins have the call-back function to show the image after uploaded.
I have a form and a div. I want the user to select an text file and hit submit and that will populate the div with the content of the file. I would like to do that without having to refresh the page.
<form action="action.php" method="post" enctype="multipart/form-data">
Click the "Choose File" button and browse for the file to import.<br /><br />
<input type="file" name="filelocation" value="Browse" /><br />
<input type="submit" name="submitform" value="Submit" />
</form>
<div id="filecontent">
</div>
There is no easy way to submit/upload the files via ajax. However, you can go for the jQuery Uploadify plugin to the trick for you.
Uploadify is a jQuery plugin that
integrates a fully-customizable
multiple file upload utility on your
website. It uses a mixture of
Javascript, ActionScript, and any
server-side language to dynamically
create an instance over any DOM
element on a page.
Theres is no easy way to do that, but u can use an Iframe with an ajax call to get your file to the server and work with it the normal ajax way
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
File: <input name="myfile" type="file" />
<input type="submit" name="submitBtn" value="Upload" />
</form>
look at target="yourhiddeniframe"
here is a complete howto:
http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html
greetings