I got a form with file upload fields along with others text field etc., I was thinking to allow user to select their upload files (maximum 3 files), can I achieve it with just share one file input box and display the selected file name under it before submit? can jquery do this? I had found lots of existing jquery library that has such function, but all will uploaded the files in real time before I validate others field and click submit to request ajax process.
Please advise.
I did something like what you maybe need. When you click on the 'select files' and choose some files, it will show you a list of them. I used a jQuery. Here is the code:
<input type="file" id="test" multiple>
<div id="text"></div>
<script type="text/javascript">
$('#test').bind('change', function() {
var files = this.files;
var i = 0;
for(; i < files.length; i++) {
var filename = files[i].name + "<br />";
$("#text").append(filename);
}
});
</script>
Related
I have a single image form I would like to upload my images with for a store page. It simply needs to be clicked, show the upload box, and then autoSubmit when they select the image and replace the one image with the new uploaded item.
Here is the current page layout, with no actual upload button. On image click, we will show the upload windows on users PC:
This is the code for the highlighted area in the HTML field
<div class="uploader">
<form method="POST" id="upload_image">
<img src="/img/upload.png" id="imageUpload" alt="upload" />
</form>
</div>
So once the form submits, using an Ajax request, when it returns and is successful I plan to store the image name (usually the current time() as filename) as a session variable, now I need to show a Loading... image while the upload process happens and then replace the imageUpload with the new image located in /img/thumbs/NEWIMAGENAMEHERE.png.
Question Time
Is there a jQuery function that I can use to replace the image with the loading image and then the loaded image once upload completes? Is there a jquery library already for SINGLE image upload like this? all the library's I have found work for multiple images and since we only support one image on this store layout, we don't want multiple image upload.
Thanks
Thanks to suggestion from #aron9forever I have decided instead of upload the image right away on it's own, I would simply display the image and then upload on form submit. This does pose the annoying issue that when they submit the form, if there is an issue, that they need to re-click upload image but I may have a way around that using $_POST variables.
<div class="uploader">
<img id="imagetoUpload" src="/com/img/upload.png" alt="upload">
</div>
<input type="file" id="productImage" style="display:none;" name="img" value="">
Using this jQuery
$(function() {
function readURL(input) {
if(input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagetoUpload').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
};
$("#productImage").change(function(){
readURL(this);
});
$("#imagetoUpload").click(function() {
$("input[id='productImage']").click();
});
});
I'm using a lightweight image editor jQuery plugin called andyvr/picEdit
https://github.com/andyvr/picEdit
This is just a plugin that turns an input:file element into an HTML canvass, and allows the user to select/edit/crop/manipulate an image file on the client side. The actual uploading and processing is done via the usual FORM UPLOAD and PHP $_FILE processes.
What I wanted to do is grab the "edited" picture data from this plugin and send it via $.post() instead of through the Form submit action.
Do you guys know what element I should select to include in my post variables?
var postvars = {};
postvars.final_image = $("#what_element").val();
$.post("script-name.php", postvars ,function(data){.....
I tried to go through the JS file but I can't seem to figure it out.
PS
I hope I came across clear with this question. I was having a hard time structuring it.
Assuming you are using the same picedit as I used and are still looking for an answer:
The html file input:
<input type='file' name='thefile' id='thebox'>
The jquery to make the file input act like an image edit box:
$(function() {
$('#thebox').picEdit();
});
The post command:
$.post( "handler.php", { story_edited : 1, id : 1 }, function( data ){ document.getElementById( 'photos' ).innerHTML = html = data }, "html" );
Notes:
handler.php = the name of the file that you want to use to process the input!
<div id='photos' name='photos'>
is a standard div tag that I use to update onscreen info in another part of the page! So, document.getElementById( 'photos' ).innerHTML will load handlers.php in to the photos div tag!
Use:
foreach($_FILES as $file)
to process the images as normal file upload from a web page!
I have one other button that pulls it all together. After I finish editing the image, I click on an update button that calls the handler and uploads and saves the file as well as dynamic updating of a photoalbum section elsewhere on the page.
TODO:
If I could find a way to attach a callback function I would not need to use this separate button.
Hi i am trying to upload image using AJAX but when i try to append FormData with my file object it didn't work here is my code
var data = new FormData();
$.each(files, function(key, value){
console.log(value);
data.append(key, value);
console.log(data);
});
and in console i got this response
File { size=1626773, type="text/comma-separated-values", name="Prepaid_Rates_01.03.2014.csv", more...}
uploadrates.js (line 17)
FormData { append=append()}
here u can see that File is shown in console but not available in data after append
i also see this type of questions but not find any proper answer that works
I'm not sure if that would work at all. Traditionally, the way to upload files with ajax is to submit the form to a hidden iframe, then give a response along the lines of:
<script type="text/javascript">window.parent.myCallback('Response Received!');</script>
So you would create a multipart form, set the target attribute to your iframe's name, and have all the fields (including the file fields) as form fields in this form, with the iframe after, e.g.
<form method="post" action="/my-upload-url" target="hidden-iframe">
Form fields here...
</form>
<iframe name="hidden-iframe"></iframe>
Then when the iframe loads after processing your form, it will immediately execute the javascript you've outputted as a response, which will call the function myCallback in your main page, so you should create that function as well:
<script type="text/javascript">
function myCallback(message) {
alert(message);
}
</script>
Altogether, your page should therefore be:
<form method="post" action="/my-upload-url" target="hidden-iframe">
Form fields here...
</form>
<iframe name="hidden-iframe"></iframe>
<script type="text/javascript">
function myCallback(message) {
alert(message);
}
</script>
there was a problem of using older jquery version file and by replacing with the latest do the job.
here is the old jquery
<script src="jquery-1.4.4.js"></script>
and the new jquery file is as:
<script src="jquery-1.11.0.min.js"></script>
i have no idea of the changes in both files but when i try the latest version it allow me to upload the file and now i prove that the latest versions are better to use and try to use the latest version;
So I'm struggling a bit to find what I'm looking for and how to implement it.
I have a basic PHP file uploader working, in that a user presses a custom upload button, selects a file and then using JS, it checks for a change (Ie. the user selecting a file) and then submits the form which uploads the image fine.
What I also want now is a drag & drop to upload area. So the user can drag an image from their file explorer and drop it in a designated place (not the whole page) and then once that image has been dropped for the form to submit automatically with their image and use the same PHP processing.
Is this possible and realistic?
This is absolutely realistic and possible without using any third parties plugin.
The following snippets should give you an idea of how it could work:
Drop area
$(".drop-files-container").bind("drop", function(e) {
var files = e.originalEvent.dataTransfer.files;
processFileUpload(files);
// forward the file object to your ajax upload method
return false;
});
the processFileUpload()-Method:
function processFileUpload(droppedFiles) {
// add your files to the regular upload form
var uploadFormData = new FormData($("#yourregularuploadformId")[0]);
if(droppedFiles.length > 0) { // checks if any files were dropped
for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped
uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files
}
}
// the final ajax call
$.ajax({
url : "upload.php", // use your target
type : "POST",
data : uploadFormData,
cache : false,
contentType : false,
processData : false,
success : function(ret) {
// callback function
}
});
}
form example
<form enctype="multipart/form-data" id="yourregularuploadformId">
<input type="file" name="files[]" multiple="multiple">
</form>
Feel free to use something like this as a starting point. The browser support of this you can find here http://caniuse.com/#feat=xhr2
Of course you can add any extras you wish like progress bar, preview, animation...
i want to make a registration form in which the user should be able to upload the profile picture along with the registration form . I am uploading the picture using ajax like this
$(document).ready(function () {
$('#UploadForm').on('submit', function (e) {
e.preventDefault();
$('#SubmitButton').attr('disabled', ''); // disable upload button
//show uploading message
$("#profile_picture").html('<div class ="update_load" style="padding:10px"><img class="load_pic" src="images/ajax-loader.gif" alt="Please Wait"/> </div>');
$(this).ajaxSubmit({
target: '#profile_picture',
success: afterSuccess //call function after success
});
});
});
the feedback from the ajax is the picture like this
echo '<img class="profile" src="uploads/'.$name.'.'.$ext.'" >';
Now i want to transfer the $name variable on the other process.php file to my current index.php file so that i can insert it using the MySQL Query . i dont know how to do that . And my second question is that if a user changes his picture more than once in the registration form , how would i delete all of his previous uploads ?
ok, this is what I do and I believe that can help you:
1) generate a timestamp + randon number > magic number
2) use uploadify jquery plugin to upload the photo to a temp folder (you can upload photos from the same form where the user completes personal data)
3) save that file with the magic number as the name (you can upload as many as you want over writing the previous one)
4) POST that generated number along with the rest of your form with the user data
choose a number 5):
5a) When saving the data, simply rename the temp file to a final folder with your new id from mysql
5b) leave the temp file as it is, just move it to a final folder and use the magic number to store it in your database
hope this helps!
You can write an afterSuccess function taking response as parameter.
$(this).ajaxSubmit({
target: '#profile_picture',
success: afterSuccess(data) //call function after success
});
function afterSuccess(data)
{
//parse your response to take the name
//make another ajax request to save it to database
}
This function can handle the new picture uploads too.
You will make that checks in php level (the ajax called)
Parse the img string to take src like that:
var img = $('<img class="profile" src="uploads/gaidouri.jpg" />');
var src = $(img).attr('src');