i have this cod that insert text to data base, but i need insert the images withe text into data base.
my code ajax like :-
function AddComment(){
var text=$("#text").val();
$.ajax({
type:"post",
url:"application/controllers/process.php",
data:"text="+text+"&action=add",
success:function(data){
showComment();
}
});
}
my form :-
<form>
<input id="inputUpProfile" name="inputUpProfile" class="inputUpProfile hidefile" type="file" onchange="readURL(this)"/>
<img id="blah" src="#" width="100" height="100" style="display:none" />
<textarea name="post" id="text" rows="3" cols="40" onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
<ol class="controls clearfix">
<input type="button" id="sent" onclick="AddComment();" class="uibutton confirmb" value="Send">
</form>
To upload an image using Ajax, you need to use an iFrame, a flash plugin or something like that. With iFrame, the concept is that you have an iFrame (invisible) somewhere on your page with an ID. You point your form's target attribute at it, then in the result page in the iFrame you call a function in the parent window's javascript which triggers the result in your main window. It's fairly straight forward and doesn't require large plugins or much messing around with.
This is heavily documented on stack, so do some searching.
https://stackoverflow.com/search?q=php+ajax+jquery+upload+image+with+iframe
Related
What I need, I have xxx.php webpage which connect to PostgreSQL DB, send some query and result is displayed inside the iframe. Then I have simple yyy.html page where I have form for searching inside DB, but I want to open iframe on the same page (after sql query is done), not by opening another page. Is that possible to do it? It works in my case just by creating another page.
I hope it is clear.
Thank you
<?php
$kpc = $_POST["kpc"];
$ku= $_POST ["ku"];
<body>
<script>
function klik(){
document.getElementById("maps").innerHTML = '<object type="text/html" data="xxx.php" ></object>';
}
</script>
<form action="datab.php" method="post">
text: <input type="text" name="kpc"><br>
text2: <input type="text" name="ppc"><br>
<input type="Submit" id="submit">
</form>
<iframe id="maps">
</iframe>
</body>
The content of an iframe element is alternative content to display if iframes are not supported.
If you want to display content on the same page, then don't use an iframe.
<object type="text/html" is more-or-less the same as an iframe anyway. You could just not use that:
document.getElementById("maps").src = "xxx.php";
… for that matter you could remove the JavaScript and just submit the form directly to the frame:
<form action="xxx.php" target="name_of_iframe">
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
I need to be able to show an image along with two lines of input texts.
I was wondering if anyone knows of a good minimalistic plugin that can do it.
It is for proxying a CAPTCHA like text. Not too big.
Thanks!
I would suggest jQuery Tools, specifically the Overlay. It'll look something like this:
<div id="overlay">
<div><img src="" id="picture" /></div>
<div><input type="text /><input type="text" /></div>
<button class="close">Submit</button>
</div>
With basic overlay code:
$("#overlay").overlay({
closeOnClick: false,
closeOnEsc: false
});
You can then use the onBeforeClose event to perform any submission actions, validation, etc. (documentation here).
If you need to change the image after the page is loaded, you can use the following:
$("#picture").attr("src", varWithSource);
If you need it, you can also use jQuery Tools's form tools for validation and structure it like a form inside an overlay.
The structure looks like this:
<form>
...
some stuff
...
file select
...
some stuff
...
</form>
I need to send the input data from "file select" while not sending "some stuff" and as far as i've tried I couldn't get a form inside another form so that's not an option.
The way it works is like this: the file select control isn't displayed at first, clicking a button makes it show the control and some other stuff. I need a button to submit that file to be checked for different things (naming, size, etc) and uploaded to the server, without changing or reloading the rest of the window.
I could change the layout a bit and get the file select stuff out of the form but the boss doesn't want to change the design of the window and removing the outer-most form will be a lot of work as it's a very complicated part of the web site.
So, as the question says: Can I do it? Can I get the file trough javascript and send it to another php file for processing?
The most browser compatible way to achieve this is to use a hidden iframe that you submit the form into. For example:
<iframe name="my_iframe" id="my_iframe" style="display: none;"></iframe>
<form action="/next_step.php" method="post" target="my_iframe" entype="multipart/form-data">
<input type="file" name="file_upload" />
<input type="button" id="upload_btn" value="Upload file" />
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<input type="submit" value="Next step" />
</form>
<script type="text/javascript">
var btn = document.getElementById('upload_btn');
btn.onclick = function(){
var form_elem = document.forms[0];
// direct file uploads through the hidden iframe
form_elem.action = '/test_file.php';
form_elem.target = 'my_iframe';
// submit the form
form_elem.submit();
// now reset for next step in the form
form_elem.action = '/next_step.php';
form_elem.target = null;
};
</script>
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)