I have this Html code and I try to save my record in DB
<div>
<p> Item Name :
<input type = 'text' id = 'ItemName' />
</p>
<p> select Image :
<input type = 'file' id = 'Image' />
</p>
<input type='button' id ='btnSaveItem'>Save </input>
</div>
How can I upload a picture and save it using Jquery and PHP?
I have not been able to find a Jquery method to upload an image, but I need to do without a page refreshing.
Normally you just can't upload images via Ajax, you will need workarounds.
I use this jquery plugin, it's easy to use and you don't need to code almost nothing: http://malsup.com/jquery/form/
Not sure if it's possible, but seems to me like every other jquery post-without-refresh :) Put names in the desired fields, not only id's. Then post to a specific .php page the desired data via jquery, and make your upload logic there. The correspond will be between your jquery and .php page, so no refresh will be done. The text field you can get with the $_POST superarray in php, and the file with $_FILE.
This can be uploading with out refreshing using uploadify,
refer http://www.uploadify.com/demos/
I've recently added an answer for a similar question. Please take a look at this:
Upload image using jquery
It uses $.ajax to upload a file.
Related
Here Is the code :
<div action="form_upload.html" class="drop zone" name="file upload"></div>
I got the code from the bootstrap template. there is no Input file tag.
how can I upload file from that div to mysql using PHP.
I tried upload using common way,
but I can't get the filename.
I don't know the whole scenario but in my understanding, you want a div behaving like a file input tag. So you can do this like this
<input type="file" id="fileupload" style="display:none"/> <!--Set display none -->
<div id="OpenImgUpload">File Upload</div>
And on the div's click event write the jQuery code like :
$('#OpenImgUpload').click(function(){ $('#fileupload').trigger('click'); });
Rest you can apply further jquery code for submitting the form values
I have this code that helps me to open a file input when I click on an image:
HTML/PHP:
<label for="img-input">
<img src=<?php echo "".$file[$n].""; ?> class="canvas-1">
<div class="alert-success pad-top-bottom text-center"><strong><?php echo basename($file[$n]); ?></strong></div>
</label>
<input type="file" id="img-input">
where "$file[$n]" is the address of the file on the server folder. There is a bunch of image that are rendered on the screen and when I click on one them, the file input opens. That is ok.
What I would like to do is that when I select a image from the file input by clicking on a specific image, The selected image should replace the image I clicked before.
I read many uploading solutions with JQuery but none provided the solution I wanted. Do someone know a way to handle that?
Thanks in advance.
You should use only JS for changing preview of picture in page.
Like this
If you want it to also change on server side then you should use AJAX solution. This solution are more complex, but you can find a lot of tutorials in internet.
I am currently working on php project where I need to upload files, but I have no way of knowing how many files the user will upload.
There will be one file upload by default on the form with a link to add another file upload. When the form is submitted how would I post all of the files to the php script if I don't know the number of files that are being uploaded.
Does it work in the same way as a checkbox array so you could have something like
<input type="file" name"myFile[]" />
<input type="file" name"myFile[]" />
Thanks for any help you can provide.
Yes, works fine.
try to do this, after post form with files:
<pre>
<?php print_r($_FILES['myFile']['tmp_name']); ?>
</pre>
You will get a array. Access each file info with their index:
$_FILES['myFile']['tmp_name'][0];
$_FILES['myFile']['tmp_name'][1];
Yes, it works exactly like a checkbox array.
I have a <div/> tag which contains a file upload <input id="file" type="file"/> tag. I want to post the contents of the input tag to a php page using $.ajax() or $.post() but how do I grab the contents of the input tag having its type as "file"? so I can submit it using the jQuery ajax functions?
Note: My code doesn't have a <form/> tag yet. I am not sure if its mandatory to upload files. Also i've seen some workarounds using <iframe> I want to know if this can be done otherwise.
I don't want to use any plugins to do this.
A byte stream can't be part of an asynchronous request.
In other words, you can't send data using AJAX approaches.
you can't send file through $.post...
you can use this link to uplaod file through ajax..
http://www.uploadify.com/demos/
What I want
I want to upload a file without reloading the page, also I want to add the source link for the image to the textarea.
So when I push the upload_photo, the image uploads and a link is added to the textarea.
I want pure HTML, Javascript|AJAX and PHP.
What I have
<form action"index.php" method="post" enctype="multipart/form-data">
<textarea id="textarea" name="text"></textarea>
<input type="file" name="photo" />
<input type="submit" name="upload_photo"/>
<input type="submit" name="post"/>
</form>
Example sites:
http://www.friendfeed.com - the page don't reloads when you upload the files
What I don't want
Please avoid posting solutions with jQuery or any library, API.
That's easy.
Put an iframe, give it a name, for example "MyIframe".
Then in the form, add the TARGET attribute, with the value "MyIframe", and the action - the script that takes the upload (takeupload.php for example)
In the main page define a Javascript function that does something you need after the upload is done, which will be called, with parameters, from the page generated by takeupload.php.
in takeupload.php upload the image, then send as an output a normal blank HTML page that will execute a script which will call the method described above, with a set of parameters you need (image name, path, error, or plain HTML to insert somewhere, etc.).
use it like this:
<script type="text/javascript">
parent.YourJSMethod(parameters);
</script>
The page will be loaded in the iframe, and it will run a function defined outside the iframe. Upload is done, and the parent page receives data about the result.
This is fairly simple. No jQuery needed, no AJAX, no nothing, just a very simple Javascript code and a little HTML.
This can indeed be done with AJAX. I don't think that using AJAX is any more of a security risk than sending a vanilla HTML form; you will have to validate all user input on the server side all the same. Here's a simple example:
http://www.webtoolkit.info/ajax-file-upload.html