I want to get the temp name of image upload using php and ajax.I got the file name of upolad image. But dont get the temp name of image upload.My code is given below
main.php
<form action=" " method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputFile">File Upload</label>
<input type="file" name="file" id="file" size="150">
<p class="help-block">Only Excel/CSV File Import.</p>
</div>
<button type="button" class="btn btn-default"
name="Import" value="Import" onclick="file_up()">
Upload</button>
</form>
<div id="upload_show"></div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function file_up() {
var file = $('#file').val();
$.ajax({
type: "POST",
url: 'first_ajax.php',
data: 'file=' + file,
success: function (msg){
$("#upload_show").html(msg);
}
});
}
</script>
first_ajax.php
<?php
echo $file1 = $_POST['file']; // for get file name
echo $file1 = $_POST['file']['tmp_name']; //for get temp name
?>
Instead of,
var file = $('#file').val();
try,
var file = $("#file").prop("files")[0];
Use FormData to get $_FILES and $_POST array in AJAX file...
function file_up() {
var formData = new FormData($('#form')[0]);
$.ajax({
url: 'first_ajax.php',
type: 'POST',
data: formData,
async: false,
success: function(data) {
$("#upload_show").html(msg);
},
cache: false,
contentType: false,
processData: false
});
}
Related
How I can use FormData with multiple file inputs?
<input type="file" id="file1">
<input type="file" id="file2">
<input type="file" id="file3">
Now html5 support multiple file upload in one input filed ! If you want to start upload auto without click , you should do by onchange method . From ajax , you must use new FormData() .
upload.php
<input type="file" id="files" name="filefield" multiple="multiple">
<script type="text/javascript">
$("#files").on("change",function(){
var ajaxData = new FormData();
var obj = $(this)[0];
$.each(obj.files,function(i,file){
ajaxData.append("file['"+i+"']",file);
});
$.ajax({
url :'index.php',
data: ajaxData,
contentType: false,
processData: false,
dataType: 'json',
type:"POST",
success : function() {
}
});
})
index.php
<?php
var_dump($_FILES);
?>
I have three type of inputs those are file input, text input and variable. I want to upload those inputs by sending data to PHP file by using Ajax JSON. Also I want to know how to capture these data in PHP file.
I am using HTML code without form syntax. variable data name as a val1 in JQuery code.
HTML Code:
<div class="container" id="post">
<textarea id="posttext" autocomplete="off"></textarea>
<input type="file" name="file" id="file" multiple accept=".mp4, .mov, .m4v, .MPEG-4, .gif, .jpg, .png"/>
<button type="button" id="submitpost">Submit</button>
</div>
JQuery Code:
$(document).on("click", "#submitpost", function(){
var val1 = "Some Datas";
$.ajax({
url: post.php,
type: 'POST',
data: VALUES,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
PHP Code:
<?php
if (!isset($_POST['VALUES']) && !empty($_POST['VALUES'])) {
$params = $_POST['VALUES'];
}
?>
How to get each values in PHP to Upload files and insert text and variable data to database.
Use this code:
Html:
<div class="container" id="post">
<form enctype="multipart/form-data" method="POST" id="myform">
<textarea id="posttext" name="posttext" autocomplete="off"></textarea>
<input type="file" name="file" id="file" multiple accept=".mp4, .mov, .m4v, .MPEG-4, .gif, .jpg, .png"/>
<button type="submit" name="submitpost" id="submitpost">Submit</button>
</form>
</div>
Jquery:
$(document).on("click", "#submitpost", function(e){
$("form#myform").submit();
});
$("form#myform").on('submit', function(e){
e.preventDefault();
var val1 = "Some Data";
var file = this.files[0];
var form = new FormData();
form.append('file', file);
form.append('val1', val1);
form.append('posttext', $('#posttext').val());
$.ajax({
url : "post.php",
type: "POST",
cache: false,
async: false,
contentType: false,
processData: false,
data : form,
success: function(response){
alert(response);
}
});
});
PHP Code:
<?php
if (isset($_POST) && !empty($_POST)) {
print_r($_POST);
print_r($_FILES);
}
?>
All other input type text and textarea values are properly passed on PHP processed page via jQuery (.js) page except input type file (image). Can anybody please help?
upload.php
<form name="Uform" id="Uform" novalidate enctype="multipart/form-data">
<div class="control-group form-group">
<input type="file" name="img" id="img">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</form>
upload.js
var FileData = $('#img').prop('files')[0];
var form_data = new FormData();
form_data.append('file', FileData);
$.ajax({
url: "./user/upload_.php",
type: "POST",
data: {
img: form_data
},
cache: false,
})
upload_p.php
$str_photo = "";
if(isset($_FILES['img'])) { $str_photo = trim($_FILES['img']['name']); }
i'm a amateur programer. I'm coding upload and insert to database function with php and jquery ajax but it not work
my form
<form>
<input type="file" id='iputfile1' />
</form>
my jquery script
iputfile1 = $("#iputfile1").val();
jQuery.ajax({
type:"POST",
url:"ex.php", //goi toi file ajax.php
data:"filename"=filename+"&+"&iputfile1="
+iputfile1,
success:function(html){
jQuery("#responseDiv").show();
jQuery("#responseDiv").html(html);
}
});
my ex.php file
$iputfile1 = $_REQUEST['iputfile1'];
print_r($iputfile1)
after select file and submit my ex.php file not recivice $_file['tmp']
<input type="file" class="file">
$(".file").on("change",function(){
var file = new FormData();
file.append('file',$('.file')[0].files[0]);
$.ajax({
url: "upload.php",
type: "POST",
data: file,
processData: false,
contentType: false,
beforeSend:function(){
$(".result").text("Loading ...");
},
success:function(data){
$(".result").html(data);
}
});
<div class="result"></div>
in upload.php
<?php
include("database.php");
$name = $_FILES["file"]["name"];
if(move_uploaded_file($_FILES["file"]["tmp_name"], "DESTINATION/".$name)){
// insert to data base
echo '<img src="DESTINATION/'.$name.'">';
}
?>
I've been trying to figure out how to upload a file through ajax for the past several hours and nothing.
Here's the code:
HTML:
<form action="" method="post" id="uploadForm" enctype="multipart/form-data">
<input type="file" name="image" id="image">
<input type="submit">
</form>
JS:
<script>
jQuery(document).ready(function(){
jQuery('form#uploadForm').on('submit', function(e){
e.preventDefault();
var file = jQuery('#image')[0].files[0];
var form_data = new FormData( jQuery("form#uploadForm")[0] );
form_data.append( 'image', file );
jQuery.ajax({
url: 'index.php?a=do',
type: 'POST',
processData: false,
contentType: false,
cache: false,
data: form_data,
success: function(response) {
console.log(response);
},
});
return false;
});
});
</script>
PHP:
<?php
$a = isset($_GET['a']) ? $_GET['a'] : '';
if($a <> '') {
echo "result - ";
var_dump($_POST);
die();
}
?>
As a result I get an empty array, however if I leave the file field empty, then I get:
result - array(1) {
["image"]=>
string(9) "undefined"
}
I've tried serialize(), serializeObject(), serializeArray(), $.param and every damn time I get "undefined function" error in console.
I went through dozens of similar questions on stackoverflow and nothing helped. I tried doing $.post instead of $.ajax and the "data" field which contains form_data is empty.
I need this for a Wordpress plugin and I'm trying to avoid using 3rd party JS plugins for the upload part.
$_FILES is where you check for uploaded files not $_POST.
Also in your code you actually upload the file twice as it is in the form you instantiated the form data object with then you add it again with append.
Do either
var form_data = new FormData( jQuery("form#uploadForm")[0] );
or
var form_data = new FormData();
form_data.append( 'image', file );
<html>
<head>
<title>Ajax file upload</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function (e) {
$("#uploadimage").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "ajax_php_file.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
alert(data);
}
});
}));
</script>
</head>
<body>
<div class="main">
<h1>Ajax Image Upload</h1><br/>
<hr>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="image_preview"><img id="previewing" src="noimage.png" /></div>
<hr id="line">
<div id="selectImage">
<label>Select Your Image</label><br/>
<input type="file" name="file" id="file" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
</div>
</body>
</html>