This file index
<form name="classupload" method="post" enctype="multipart/form-data" action="">
<h3>Select pictures: </h3><br />
<input type="file" name="Filedata[]" style="margin-top:2px;"/><br />
<input type="file" name="Filedata[]" style="margin-top:2px;"/><br />
<input type="file" name="Filedata[]" style="margin-top:2px;"/><br />
<input type="file" name="Filedata[]" style="margin-top:2px;"/><br />
<input type="file" name="Filedata[]" style="margin-top:2px;"/><br />
<div id="viac"></div>
<div style="margin-top:4px;"><a onclick="multiupload();">More</a><br /></div>
<input type="submit" value="Upload" id="classupload"/>
</form>
And file javascript
jQuery(document).ready(function() {
$("#classupload").click(function() {
var xleng=document.classupload.elements['Filedata[]'].length;
dv = document.createElement("div");
for (var i = 0; i < xleng ; i++)
{
img=document.classupload.elements['Filedata[]'][i].value;
if(img.toString().length > 1){
$.ajax({
type: "POST",
url: "upload.php",
data: img,
success: function(data_response) {
dv.innerHTML = i + ' - ' + data_response;
}
});
}
}
responseStatus("Done!");
document.getElementById("result").appendChild(dv);
return false; // avoid to execute the actual submit of the form.
})
});
And file upload.php
if ($_REQUEST['Filedata']) {
}
Please help me write file upload.php display file
because Instead of the file being uploaded, I get nothing ,Please HELP ?
You can't upload files via AJAX directly. You need a plug-in that uses a hidden Iframe or makes use of HTML5 features.
Related
HTML Form:
<form enctype="multipart/form-data" method="post" name="fileinfo" id="myForm">
<label>Your email address:</label>
<input type="email" autocomplete="on" autofocus id="userid" name="userid" placeholder="email" required size="32" maxlength="64" /><br />
<label>File to stash:</label>
<input type="file" name="fileToUpload[]" id="fileToUpload[]" required />
<input type="file" name="fileToUpload[]" id="fileToUpload[]" required />
<input type="submit" id="save" value="Stash the file!" />
</form>
I have used formdata to the best of my knowledge but I am not sure if I have done it right.
Javascript Code:
<script type="text/javascript">
$('#save').click(function(event){
event.preventDefault();
var fd = new FormData(document.querySelector("form"));
var ins = document.getElementById('fileToUpload[]').files.length;
console.log(ins);
if (ins != 0) {
fd.append("fileToUpload[][]", document.getElementById('fileToUpload[]').files[0]);
fd.append("Email", $('#userid').val());
for (var pair of fd.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}
$.ajax({
url: "upload.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function(data){
console.log(data);
}
});
}
else{
console.log("Nothing attached ");
}
})
</script>
In my upload.php file i am just trying to print the names. but i Am always getting count value as 3 whatever be the number of files uploaded on the front end, even if I don't upload any files at all, it gives the value 2.
<?php
$count = count($_FILES['fileToUpload']['name']);
echo $count;
for ($i = 0; $i < $count; $i++) {
echo 'Name: '.$_FILES['fileToUpload']['name'][$i].'\r\n';
}
?>
I am doing this for the first time. I have no idea where I am going wrong. Thanks in advance.
PFB my Html code :
<form id="form" enctype="multipart/form-data">
<label>File One</label>
<input type="file" name="file[]" id="file[]">
<br/>
<label>File Two</label>
<input type="text" id="name" name="name">
<input type="file" name="file[]" id="file[]">
<br/>
<label>File Three</label>
<input type="file" name="file[]" id="file[]">
<input type="submit" id="submit" name="submit" value="Submit">
</form>
I am trying to submit this form using ajax as below :
<script type="text/javascript" >
$(function() {
$('#form').submit(function(event) {
var name = $("#name").val();
var file[] = $("#file[]").val();
var dataString = 'name='+name+'&file[]='+file[];
$.ajax({
type: "POST",
url: "k.php",
data: dataString,
success: function(data123){
alert(data123);
}
});
return false;
});
});
</script>
But its not working. i:e the below line :
var file[] = $("#file[]").val();
var dataString = 'name='+name+'&file[]='+file[];
Any help would be highly useful.
I need to submit multiple photos along with text fields using ajax function but I am stuck in this issue from the past many days.
For uploading files using ajax, you need to do some extra work using the FormData object.
Check out http://blog.teamtreehouse.com/uploading-files-ajax for an example of how to do this.
form.php
<form name="frm1" action="3.php" method="POST" enctype="multipart/form-data">
<div class="upload">
<input type="hidden" name="r" value="father" id="r">
<input type="hidden" name="id" value="<?=$id?>" id="r1">
<input type="hidden" name="page" value="<?=$a?>" id="r2">
<input type="file" name="uploadPic" id="upload" />
</div>
</form>
pop.js
$(".upload").on("click", function () {
console.log("page");
$(".upload").on("change", function () {
var fr =$("#r").val();
var fr1 =$("#r1").val();
var fr2 =$("#r2").val();
var fr3 =$("#upload").val();
//console.log("page"+fr+fr1+fr2+fr3);
$.post("upload.php", {
"pic": fr3}, function (data) {
console.log(eval(data));
if (data.result == "1") {
console.log("getresult");
//webpopup();
} else {
alert("Please try again.");
}
}, "json");
});
});
i want to send the whole image as input file using $.POST . but i am only able to send the name of the image . how to the whole image .
If you upload something via HTML, you can access it in PHP with $_FILES.
move_uploaded_file($_FILES['upload']['tmp_name'], $dir . "/" . $filename);
With this code, you can move the uploaded file into every directory you want and then access it with your browser or load it into a form.
SOLUTION: I had to drop the sumbmit button and use a regular button. The rest of this code works. I also dropped the HTML form.
I'm trying to send an image + some text to my php script with ajax using formdata.
This is what i got:
$ajax_uploadImage = function (form)
{
var data = new FormData();
data.append('title', form.find('#title').val());
data.append('comment', form.find('#comment').val());
data.append('image', form.find('#image').prop('files')[0]);
$.ajax({
url: '../php/upload_image.php',
data: data,
type: 'POST',
processData: false,
contentType: false,
success: function (data) {
alert('something');
}
});
}
The form in the function parameters is a normal html form, here is the form in html:
<form enctype="multipart/form-data" id="upload_image">
<label for="title">Title:</label>
<input type="text" id="title" name="title" />
<br />
<label for="comment">Comment:</label>
<input type="text" id="comment" name="comment" />
<br />
<label for="image">Image:</label>
<input type="file" id="image" name="image" />
<br />
<input type="submit" value="Upload picture" name="submit">
<hr />
</form>
The alert in success never triggers, can anyone help?
EDIT: Adding the PHP, even though it doesn't do anything:
<?php echo 'something'; ?>
Right now you are storing a jQuery object in the FormData which cannot work. Use the values of those elements instead. In case of the file input you need to use the File object in the files property of the DOM element:
data.append('title', form.find('#title').val());
data.append('comment', form.find('#comment').val());
data.append('image', form.find('#image').prop('files')[0]);
Try adding form action like:
<form enctype="multipart/form-data" id="upload_image" action="upload_image.php">
I want to upload a file with ajax
here is my code
php, html:
<form action="uploadVideo.php" method="POST" enctype="multipart/form-data">
<input type="file" name="choosefilebtn" id="choosefilebtn" size="50" />
<input type="button" class="uploadbutton" value="upload" name="uploadbtn" id="uploadbtn" />
</form>
jquery:
$(function() {
$('#uploadbtn').click(function() {
var filename = $('#choosefilebtn').val();
alert(filename);
$.ajax({
type: "POST",
url: "uploadVideo.php",
enctype: 'multipart/form-data',
data: {
file: filename
},
success: function() {
alert("Data Uploaded: ");
}
});
});
});
when I use type sumbmit for upload button ( without ajax) it works, but with ajax it doesnt work, can any body help me,
Thanks
Edit:
Added uploadVideo.php code
$publish->remotehost=$ftpremotehost;
$publish->username=$ftpusername;
$publish->password=$ftppassword;
$publish->remotedir=CONSTANT_SERVERROOT.$folderName;
$publish->filename=$_FILES['choosefilebtn']['name'];
$publish->FTPLogin();
$publish->filecontent = fread( fopen($_FILES['choosefilebtn']['tmp_name'], "rb"),
$_FILES['choosefilebtn']['size']);
$publish->makedir($publish->remotedir);
$result=$publish->Publish();
You'll notice with the ajax call you are sending the filename, and not the contents of that file:
$.ajax({
//...
data: {
file: filename //just a name, no file contents!
},
//...
});
the only way that I am aware of sending file data via ajax is using a hidden iframe and submitting a form to that
i.e. have
<iframe style="display: none" id="formtarget" />
<form action="uploadVideo.php" method="POST" enctype="multipart/form-data"
target="formtarget">
<input type="file" name="choosefilebtn" id="choosefilebtn" size="50" />
<input type="button" class="uploadbutton" value="upload" name="uploadbtn" id="uploadbtn" />
</form>
markup
<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
<input name="FileInput" id="FileInput" type="file" />
<input type="submit" id="submit-btn" value="Upload" />
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="progressbox">
<div id="progressbar"></div>
<div id="statustxt">0%</div>
</div>
<div id="output"></div>
jquery
$(document).ready(function () {
var options = {
target: '#output', // target element(s) to be updated with server response
beforeSubmit: beforeSubmit, // pre-submit callback
success: afterSuccess, // post-submit callback
uploadProgress: OnProgress, //upload progress callback
resetForm: true // reset the form after successful submit
};
$('#MyUploadForm').submit(function () {
$(this).ajaxSubmit(options);
return false;
});
});