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/
Related
I am working on a project where users can upload their profile image, so I created an Ajax form. The form is being submitted successfully but it does not refreshes the new image that is uploaded by the user
This is my form code
<label data-toggle="tooltip" title="Your Avatar">
<img src="../assets/img/avatar/<?= $user->avatar() ?>" class="profile-settings-avatar" id="avatar" alt="Profile Avatar" />
<input id="avatar-file-input" type="file" name="avatar" class="form-control" style="display:none;"/>
</label>
This is my ajax code, Im using Ajax Form to submit it with ajax, it tried to change the src with new src when ajax completed but doesn't works
// Profile Settings Ajax
$(document).ready(function() {
let avatar = $('#avatar').attr('src');
$('#form').ajaxForm(function(){
avatar = $('#avatar').attr('src');
$.notify("Your card has been updated successfully!", "success");
});
});
Some help would be appreciated
you said that you submit it with ajax, but i dont see a url in ajaxForm paramter, how can you upload an image?
this is example ajaxform function
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})
and if you want upload an image then an image directly shows in img element, you can use onchange event in input type file for uploading image than get return value from upload image ajax to change attribute src
So I know how to do uploading in php, especially images. What I dont know is how to turn a image into a button such that clicking on it allows you to then be presented with an upload dialog that allows you to upload an image (or another file).
The typical way of doing upload input is: <input type="file" name="files[]" multiple />
But how do I take an <img /> and turn it into an image upload button?
I would use javascript for this, the principle is to hide the real file input and "click" it using javascript attached to an image
The input is positioned off the screen, if you hide it (display:none) with CSS, it will stop working in some browsers
<input type="file" class="file-select" name="files[]" style="position:absolute; left:-9999px" />
<img class="file-button" src="https://storage.googleapis.com/cdn.bark.com/qa/b5dc2e3e/a61da61d/3185c5d0/d0bfa4e1/d7d2cff4/dd6dff79/00457b9a/1009914c/6cbe2b57/fb0d89c1/d292ac8a/d6800521/a797a21a/fe1de44a/ef665fad/f1d83fce/thumbnail_529621c60502a.jpeg"/>
Then we simply use javascript to say that when the image is clicked, "click" on the file input:
$('document').ready(function(){
$('.file-button').on('click', function(e){
$('.file-select').click();
e.preventDefault();
});
});
See this JSFiddle for full demo:
http://jsfiddle.net/HhLzD/
I have a button that allows a user to select an image - shown below:
<div id="fileUpload">
<form id="joinPhotoUploadForm" method="POST" enctype="multipart/form-data">
<input type="file" id="file"/>
</form>
<div id="fakefile">
<img src="../../images/button-grey-enhanced.png" id="usePhotoSubmit" alt="BROWSE for Photo">
<span id="usePhoto">BROWSE</span>
</div>
</div>
I then need to upload the image to the server and display the image on the same page without a page refresh. I've tried the following:
$('input#file').change(function() {
$('form#joinPhotoUploadForm').submit();
});
Any advise on how I can get the image upload and displayed on the same page without a page refresh?
thx
You could use the FileReader and File API available in modern browsers to read the file client side before uploading it and display a preview then allow the user upload after they've verified the preview. You can also implement drag and drop with an image from their desktop to the browser instead of a traditional file select input.
Here is a tutorial for it: http://www.html5rocks.com/en/tutorials/file/dndfiles/
In older browsers you can just fall back to a traditional file input with a page reload.
you can try the solution provided in this tutorial
http://www.youtube.com/course?list=EC7C25B2F18F68F3EF&feature=plcp
Have you considered a fancy uploader like Uploadify or Pupload?
I have used a input file code to upload image to my wallpaper site..
<input type="file" name="img" id="img" />
Is there anyway to select a image without selecting image file..like entering URL to text box?
<input name="img" type="text" id="img" value="http://www.somesite.com/image.my.jpg" size="40" />
I tried its not working...please help me! Anyway to enter image url to text box except select browse button and selecting image file? help me i tries in different ways...
Is there anyway to user type="text" excepts type="file" so We can enter image url in that text box and upload?
With that <input> you then have to tell your PHP code to go and download that file e.g.
<?php
if (!empty($_POST['img'])) {
file_put_contents('savedImage',file_get_contents($_POST['img']));
}
However doing so opens you up to some potential security issues, so be careful!
I think what you want to do is upload an image and then display that on a page.
You need to move the image into a folder on your webserver then display that output.
More info about it here.
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)