I have a problem with multipost file using jQuery. When I echo result, server return
A PHP Error was encountered. Severity: Notice; Message: Undefined index: files[]
I'm using php-framework CodeIgniter.
Here is a jQuery code:
jQuery(document).ready(function($){
$("#new_article").submit(function(event){
event.preventDefault();
var $form = $(this),
url = $(this).attr("action");]
var files = $form.find('input[name="files[]"]').val();
var posting = $.post(url,{
files: files
});
posting.done(function(data){
$("#result").empty().append(data);
});
return false;
});
});
Here is a HTML code:
<form method="post" enctype="multipart/formdata" action="/upload" id="new_article">
<input class="text-input" id="files" name="files[]" type="file" multiple="" accept="image/*" />
<input type="submit" name="submit" value="Submit" />
</form>
how are you trying to echo it?
I tested your code and it does what you are asking for. It sends the filenames, but not the files.
Run
var_dump($_POST['files'])
and it'll show you the files' names.
But If you need to upload files, here is an actual solution :
I suggest to use the next libraries
1. AjaxFileUpload (http://www.phpletter.com/Our-Projects/AjaxFileUpload/)
2. CodeIgniter Multi-Upload https://github.com/stvnthomas/CodeIgniter-Multi-Upload
Your Form:
<form method="post" enctype="multipart/formdata" action="/upload" id="upload_file">
<input class="text-input" id="files" name="files[]" type="file" multiple="" accept="image/*" />
<input type="submit" name="submit" id="submit" />
</form>
Your JS Script:
<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/ajaxfileupload.js"></script>
<script>
$(function() {
$('#upload_file').submit(function(e) {
e.preventDefault();
$.ajaxFileUpload({
url :'/upload',
secureuri :false,
fileElementId : 'files',
dataType : 'json',
data : {
'somedata' : 'somedata'
},
success : function (data, status)
{
//do something here
}
});
});
});
</script>
Your Codeigniter upload method :
public function upload()
{
$status = "";
$msg = "";
$file_element_name = 'files';
if ($status != "error")
{
$this->load->library('upload');
$this->upload->initialize(array( // takes an array of initialization options
"upload_path" => "/mnt/httpd/htdocs/codeig/files/", // physical path where the files should be saved
"overwrite" => TRUE,
"encrypt_name" => TRUE,
"remove_spaces" => TRUE,
"allowed_types" => "gif|jpg|png|doc|txt",
"max_size" => 30000,
"xss_clean" => FALSE
));
if (!$this->upload->do_multi_upload($file_element_name))
{
$status = 'error';
$msg = $this->upload->display_errors('', '');
}
else
{
$data = $this->upload->get_multi_upload_data();
if($data)
{
$status = "success";
$msg = "File successfully uploaded";
}
else
{
$status = "error";
$msg = "Something went wrong when saving the file, please try again.";
}
}
#unlink($_FILES[$file_element_name]);
}
echo json_encode(array('status' => $status, 'msg' => $msg));
}
Related
i am using this code for uploading multiple files .here, upload and select button become disabled when uploading is in progress but this works only on client side user can easily modify the code and remove its disable property so how can i do this on server side so the user will not be able to submit the form many times by clicking upload button after disabling it.
Thanku for any help!
index.php
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Upload using Ajax</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div>
<form action="action.php" method="post" enctype="multipart/form- data" id="multiple-upload-form">
<input type="button" id="select-file-btn" value="Select Files" onclick="document.getElementById('files').click(); return false;" />
<input type="submit" id="file-upload-btn" name="file_upload_btn" value="Upload">
<input type="file" id="files" name="files[]" multiple="" style="visibility: hidden;">
<br><br>
<div class="file-bar">
<span class="file-bar-fill" id="file-bar-fill-id"><span class="file-bar-fill-text" id="file-bar-fill-text-id"></span></span>
</div>
<script type="text/javascript">
var app = app || {};
(function(o){
"use strict";
var ajax, getFormData, setProgress;
ajax = function(data){
var xmlhttp = new XMLHttpRequest(), uploaded;
xmlhttp.addEventListener('readystatechange', function(){
if(this.readyState==4){
if(this.status==200){
uploaded = JSON.parse(this.response);
if(typeof o.options.finished==='function'){
o.options.finished(uploaded);
}
} else {
if(typeof o.options.error === 'function'){
o.options.error();
}
}
}
});
xmlhttp.upload.addEventListener("progress", function(event){
var percent;
if(event.lengthComputable===true){
percent = Math.round((event.loaded / event.total) * 100);
setProgress(percent);
}
});
if(o.options.progressBar!==undefined){
o.options.progressBar.style.width=0;
}
if(o.options.progressText!==undefined){
o.options.progressText.innerText=0;
}
xmlhttp.open("post", o.options.processor);
xmlhttp.send(data);
};
getFormData = function(source){
var data = new FormData(), i;
if(source.length<=0)
{
return false;
}
else
{
for(i=0;i<source.length; i++){
data.append('files[]', source[i]);
}
return data;
}
};
setProgress = function(value){
if(o.options.progressBar!==undefined){
o.options.progressBar.style.width = value? value+"%":0;
}
if(o.options.progressText!==undefined){
o.options.progressText.innerText=value?value+"%":0;
}
};
o.uploader = function(options){
o.options = options;
if(o.options.files !== undefined){
var imageFormDataValue = getFormData(o.options.files.files);
if(imageFormDataValue===false)
{
alert("No Files Selected");
document.getElementById("file-upload-btn").disabled = false;
document.getElementById("select-file-btn").disabled = false;
}
else
{
ajax(imageFormDataValue);
}
}
};
}(app));
document.getElementById("file-upload-btn").addEventListener("click", function(e){
e.preventDefault();
document.getElementById("file-upload-btn").setAttribute("disabled", "true");
document.getElementById("select-file-btn").setAttribute("disabled", "true");
var f = document.getElementById('files'),
pb = document.getElementById('file-bar-fill-id'),
pt = document.getElementById('file-bar-fill-text-id');
app.uploader({
files: f,
progressBar: pb,
progressText: pt,
processor: "action.php",
finished: function(data){
document.getElementById("file-upload-btn").disabled = false;
document.getElementById("select-file-btn").disabled = false;
if(data.status===true){
alert(data.data);
}
},
error: function(){
alert("Error occured. Try Again after page reload.");
}
});
});
</script>
</form>
</div>
</body>
</html>
action.php
<?php
set_time_limit(0);
if(count($_FILES["files"])>0)
{
$success = 0;
$failed = 0;
foreach ($_FILES["files"]["error"] as $key => $value)
{
if(empty($value))
{
if(move_uploaded_file($_FILES["files"]["tmp_name"][$key], __DIR__."/uploads/".uniqid()."_".$_FILES["files"]["name"][$key]))
{
$success++;
}
else
{
$failed++;
}
}
else
{
$failed++;
}
}
$data = "";
if($success>0)
$data .= $success." files uploaded. ";
if($failed>0)
$data .= $failed." files failed to upload";
$response = array("status" => true, "data" => $data );
echo json_encode($response);
}
?>
As I've said in comment - no real cure to stop redundant uploads at server side as long as user has full access to html. The only thing that you can do - is to monitor total uploaded MB/day and to blacklist user ip/account who does such illegal activity. For example:
session_start();
$_SESSION['total_uploaded'] += (int)(filesize(($_FILES['fileToUpload']['tmp_name']))/(1024*1024));
if ($_SESSION['total_uploaded'] > 1024) {
echo "<p style='background-color: palevioletred; max-width:280px;'>
You uploaded too much data : {$_SESSION['total_uploaded']} MB<br>
So your IP/account will be blacklisted !</p>";
}
$html = <<< STR
<table border="1">
<tr>
<td>
<form id="uploadForm" action="" method="post" enctype= "multipart/form-data">
<br>
<input type="file" name="fileToUpload" value=""><br><br>
<input type="submit" name="submit_file" value="Upload">
</form>
</td>
</tr>
</table>
STR;
echo $html;
After some threshold of bombing server with uploads user will see:
I am using AngularJS to get the input from a form, sending the data to a php using console.log function and decoding the json file using php, then checking a database to find info matching the input values.here my code
login.html
<div ng-controller="loginCtrl">
<form action="/" id="mylogin">
Username: <input type="text" id="username" ng-model="username" ><br>
Password: <input type="password" id="password1" ng-model="password1">
<button type="button" ng-click="submit()">Login</button>
</form>
controller.js
app.controller('loginCtrl', function ($scope, $http) {
$scope.submit = function () {
alert($scope.username);
$http.post('php/userlogin.php',{'username' : $scope.username}).success(function(data){
console.log(data);
if (data == true) {
alert('aaa');
}
});
}
});
php/userlogin.php
<?php
$data = json_decode(file_get_contents("php://input"));
$user=$data->username;
include("include/db.php");
$select_user = mysql_query("select * from userlogin where username='".$user."'" );
$result = mysql_fetch_array($select_user);
$user_id=$view_prof['user_id'];
if($user_id != "" )
{
echo "1";
}
else
{
echo "0";
}
?>
Basically problem is in header content type.
Either Code it like this or let me know if you still not get post variable in php :
controller
app.controller('loginCtrl', function ($scope, $http) {
$scope.submit = function () {
alert($scope.username);
$http.post('php/userlogin.php',{'username' : $scope.username},{transformRequest: angular.identity, headers: {'Content-Type': undefined}).success(function(data){
console.log(data);
if (data == true) {
alert('aaa');
}
});
}
});
php file
<?php
var_dump($_POST); // you will surely get this.
?>
I have some working code but want to add upload image field but with no success.
My current code is:
Form:
<form id="add_product_form" enctype="multipart/form-data">
<input id="uploadFile" type="file" name="image" class="img" /><br />
<input id="status" type="checkbox" checked /><br />
<input id="product" type="text" /><br />
<label for="button" id="response"></label>
<input type="button" id="button" value="Добави" /><br />
</form>
jQuery:
<script type="text/javascript">
$('document').ready(function(){
$('#button').click(function(){
var image = $('input[type=file]').val().split('\\').pop();
function chkb(bool){ if(bool) return 1; return 0; } var status=chkb($("#status").is(':checked'));
if($('#product').val()==""){ alert("enter name"); return false; } else { var product = $('#product').val(); }
jQuery.post("products_add_process.php", {
image: image,
status: status,
product: product
},
function(data, textStatus) {
$('#response').html(data);
if(data == 1){
$('#response').html("OK");
$('#response').css('color','green');
document.getElementById("add_product_form").reset();
} else {
$('#response').html("Not OK");
$('#response').css('color','red');
}
});
});
});
</script>
products_add_process.php:
<?php
$image_name = $_FILES['image']['name'];
$image_type = $_FILES['image']['type'];
$image_size = $_FILES['image']['size'];
$image_tmp_name = $_FILES['image']['tmp_name'];
$status = $_POST['status'];
$product = $_POST['product'];
if($image_name == '') {
echo "<script>alert('Select image')</script>";
exit();
} else {
$random_digit=rand(0000000000,9999999999);
$image=$random_digit.$image_name;
move_uploaded_file($image_tmp_name,"uploads/$image");
$query=mysql_query("INSERT INTO products(product, image, status) VALUES ('$product', '$image', '$status')");
if(mysql_affected_rows()>0){
$response = 1;
echo "1";
} else {
$response = 2;
echo "2";
}
}
?>
I put alert 'Select image' and then understand that $image_name is empty and maybe somewhere have to put some code to say that I want to send DATA TYPE. I try to add to form enctype="multipart/form-data" but won't work.
Where and what have to add in existing code to make sending data, without making very big changes because this code have in a lot of files and will be difficult to edit big part of codes.
Maybe have to add that form and jQuery are in php file which is called in other mother file and structure is something like this:
products.php /call products_add.php/
products_add.php /where is the form and jQuery/
products_add_process.php /called from products_add.php to upload data/
p.s. Sorry if I don't explain my problem well but I'm from soon at stackoverflow and still learning how to post my questions :)
I have 3 files: index.html, parse.php, profile.html
index.html: It has a form, where I give the link of profile.html and with the html-dom parsing in parse.php, I should get all the data on the same page, i.e index.html.
I am new to AJAX and did not use it till now.
How should I go through on doing the operation?
index.html:
<form action="parse.php" method="post" id="myForm">
Name: <input type="text" name="uurl"><br>
<input type="submit">
</form>
parse.php:
require 'simple_html_dom.php';
$url = $_POST['uurl'];
$html = file_get_html($url);
foreach ($html->find("span[class=full-name]") as $key => $name){
echo $name."<br>";
}
script:
<script>
$(document).ready(function() {
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
index.html:
<form action="parse.php" id="myform" method="post">
Name: <input type="text" name="uurl" id="uurl"><br>
<input type="button" value="" >
</form>
<ul class="results"></ul>
Include jquery script tag, and add the following javascript code:
$(document).ready(function() {
$('#myform button').on('click', function() {
$.getJSON('/parse.php', { uurl: $('#uurl').val() }).done(function(a) {
var html = '';
if (a.results && a.results.length > 0) {
for (var i in a.results) {
html += '<li>' + a.results[i] + '</li>';
}
} else {
html += '<li class="error">No Results Found</li>';
}
$('ul.results').html(html);
});
});
});
In parse.php:
require 'simple_html_dom.php';
$url = $_POST['uurl'];
$results = array();
$html = file_get_html($url);
foreach ($html->find("span[class=full-name]") as $key => $name){
$results[] = $name;
}
echo json_encode(array('results' => $results));
So technically you aren't even using AJAX. Ajax is based on javascript and I don't see any javascript in your code.
Also, from what I understand, you don't need any PHP code to do what you're trying to.
Here is how you would do it. This would be the HTML.
<form action="parse.php" method="post">
Name: <input type="text" name="uurl" id="uurl"><br>
<input type="submit" id="submit-form">
</form>
<div id="container">
</div>
And then you would need this javascript:
var $url = $('#uurl');
var $button = $('#submit-form');
var $container = $('#container');
$button.on('submit', function(evt){
evt.preventDefault(); //to prevent the default form submission.
$.get($url.val(), function(response){
$container.html(response);
})
});
I have used jQuery for clarity, but it definitely not required.
I always got an invalid file type error in uploading csv file in codeigniter. I already googled for possible mime types for csv and still nothing works. so I bother echoing the echo $_FILES['userfile']['type']; and I got this MIME type : 'application/force-download'. Below is a snippet from the controller and a snippet from the view
Controller:
public function upload_file()
{
$status = "";
$msg = "";
$file_element_name = 'userfile';
if (empty($_POST['title']))
{
$status = "error";
$msg = "Please enter a title";
}
if ($status != "error")
{
$config['upload_path'] = './uploads/csv_list/';
$config['allowed_types'] = 'gif|jpg|png|doc|txt|.csv';
$config['max_size'] = 1024 * 8;
if (!$this->upload->do_upload($file_element_name))
{
$status = 'error';
$msg = $this->upload->display_errors('', '');
}
else
{
$status = "success";
$msg = "File successfully uploaded";
}
#unlink($_FILES[$file_element_name]);
}
echo json_encode(array('status' => $status, 'msg' => $msg));
}
View:
<input type="text" name="title" id="title" value="a" style ="display:none"/>
<p>
<input type="text" name="title" id="title" value="a" style ="display:none"/>
<label for="userfile">Upload CSV File</label>
<input type="file" name="userfile" id="userfile" size="20" />
<input type="submit" name="submit" id="submit" value ="Upload"/>
</p>
<script>
$(function () {
$('#upload_file').submit(function (e) {
e.preventDefault();
$.ajaxFileUpload({
url: '../upload/upload_file/',
secureuri: false,
fileElementId: 'userfile',
dataType: 'json',
data: {
'title': $('#title').val()
},
success: function (data, status) {
if (data.status != 'error') {
$('#files').html('<p>Reloading files...</p>');
// refresh_files();
// $("#userfile").replaceWith("<input type=\"file\" id=\"userfile\" size = \"20\" />");
$('#files').html('File Uploaded');
// $('#title').val('');
}
alert(data.msg);
}
});
return false;
});
});
</script>
The problem here is that different web browser gets different ideas on what type a file is. Since CodeIgniter's upload class is dependent of file types, this can get messy.
I followed several instruction to add more types to the fields in the config/ but neither did the trick.
I ended up with allowing all types $config['allowed_types'] = '*' and validated like this instead:
if (in_array(end(explode('.', $str_file_name)), array('php')))
return FALSE;
or in your case:
$arr_validate = array('gif', 'jpg', 'png', 'doc', 'txt', 'csv');
if ( ! in_array(end(explode('.', $str_file_name)), $arr_validate))
return FALSE;