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
Related
I have created a wall like this in facebook using php and jquery. There is a textarea and an input type=button, and using jquery when the user posts something it is displayed under the text area without renew the page. I want to enable my script using an image loader named "loader.gif", so that after press submit button the loader start working until the new post appear. Any idea hot to do this?
<?php
<textarea rows="3" id="comment_text" placeholder="share an update..." style="font-size:11pt; color:#363636; resize:none; "> </textarea>
<input type="button" id="comment_process" style=""/>
?>
You want to place the loader image where it should ultimately be, but with display:none; in its CSS. Then, when the form is submitted, simply toggle it on.
HTML
<img class='loader' src='images/loader.gif' style='display:none;' />
jQuery
$('form').submit(function(){
$('.loader').show();
});
If you are submitting the form using ajax, you may need to hide it again if a success/error is returned. If you are doing a true form submission, the page will load to a different location anyway and there is no need to re-hide the image.
i have 2 input fields and one field to upload file .i am trying to post the form using AJAX ,serializing the form data.but the problem is i am getting $_FILES empty.
here's my code:
form name="dataform" id="dataform" enctype="multipart/form-data"
<input name="url" class="inputForm" id="url" />
<input type="file" id="image" name="image" class="inputForm" />
$.ajax({
type: "POST",
url: "test.php",
data: datastring,
success: function(resultdata){
}
});
?>
The problem is that jQuery will convert the files arrays into strings and the server can't pick it up.
But don't Worry there is always an alternate solution,
you can refer this plugin to upload images using ajax,
http://www.sanwebe.com/2012/05/ajax-image-upload-and-resize-with-jquery-and-php
Its pretty simple ,you just have to submit the form using ajax and then in the php file do your upload operations and then come back to the ajax function without redirecting t aonother page.
According to what i know you con't upload files (anything) by using ajax (with out support, you can use plugins , iframes etc)
i am from java background i don't no about PHP but i am dam sure you can achieve this by using iframes ,
see see this link
or
i will give example how you can do (i did in my project same thing i am pasting)
<form action="${pageContext.request.contextPath}/catalogue/importReportaccon.action" method="post" enctype="multipart/form-data" target="upload_target" id="report_result" >
<input name="fileData" type="file" id="uploadAccessionNo" class="hidden_import"/>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
<a type="button" class="right button left" onclick="displayFileBrowseButton();" id="datasheet_import" title="Import" style="margin-left: -10px;">Import <span class="icon icon7"></a>
</form>
Scripts
function displayFileBrowseButton(){
$("#uploadAccessionNo").click();
}
$(document).ready(function() {
document.getElementById("uploadAccessionNo").onchange = function() {
document.getElementById("report_result").submit();
}
});
If you not understand this let me know by your comments
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 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 have a form SelectIamge.php which includes the following html:
<input type="text" id="urlImage" />
<input type="button" id="selectImage" />
The user needs to be able to click the selectImage button to open a popup of page UploadImage.php. The user will then upload a image and a thumbnail of that image will be displayed. If the user clicks on the thumbnail, I need to put the url of the image in the urlImage textbox.
Can someone help me solve this problem?
First of all give some id to thumbnail image i.e id='thumb'
Include jquery library file and write below javascript in the file
<script type="text/javascript">
$("#thumb").click(function(){
var src = $(this).attr('src');
$("#urlImage").val(src);
});
</script>