I tried to integrate file-input plugins from http://plugins.krajee.com/file-input/demo.
Here is my simple form:
<form action="process.php" method="post" enctype="multipart/form-data">
<input id="krajee" type="file" name="file[]" multiple="true">
<input type="submit" name="submit" id="submit">
</form>
This allow me to browse and select multiple files. When I submit the form, it uploads all files to my server. However when I browse to select file 1 and then i browse to select another file (file 2). It also shows 2 files preview But when I submit the form, it only uploads the last select file. Please help... thanks
Here is my process.php file:
<?php
if(isset($_POST["submit"])){
require("../configs/dbconnect.php");
/*Form variable */
$owner = mysql_real_escape_string($_POST["owner"]);
$title = mysql_real_escape_string($_POST["title"]);
$description = mysql_real_escape_string($_POST["description"]);
$city = mysql_real_escape_string($_POST["city"]);
$brand = mysql_real_escape_string($_POST["brand"]);
$marketprice = mysql_real_escape_string($_POST["marketprice"]);
$price = mysql_real_escape_string($_POST["price"]);
$phone = mysql_real_escape_string($_POST["phone"]);
/*** the upload directory ***/
$upload_dir= 'uploads';
/*** numver of files to upload ***/
$num_uploads = 5;
/*** maximum filesize allowed in bytes ***/
$max_file_size = 5000000;
/*** the maximum filesize from php.ini ***/
$ini_max = str_replace('M', '', ini_get('upload_max_filesize'));
$upload_max = $ini_max * 1024;
/*** a message for users ***/
$msg = 'Please select files for uploading';
/*** an array to hold messages ***/
$messages = array();
/*** check if a file has been submitted ***/
if(isset($_FILES['file']['tmp_name']))
{
/** loop through the array of files ***/
for($i=0; $i < count($_FILES['file']['tmp_name']);$i++)
{
// check if there is a file in the array
if(!is_uploaded_file($_FILES['file']['tmp_name'][$i]))
{
$messages[] = 'No file uploaded';
}
/*** check if the file is less then the max php.ini size ***/
//elseif($_FILES['image']['size'][$i] > $upload_max)
//{
// $messages[] = "File size exceeds $upload_max php.ini limit";
//}
// check the file is less than the maximum file size
elseif($_FILES['file']['size'][$i] > $max_file_size)
{
$messages[] = "File size exceeds $max_file_size limit";
}
else
{
//$temp = explode(".", $_FILES["file"]["name"][$i]);
//$extension = end($temp);
//$name[$i] = sha1(microtime()) . "." . $extension;
$name[$i]=$_FILES["file"]["name"][$i];
// copy the file to the specified dir
if(move_uploaded_file($_FILES['file']['tmp_name'][$i],$upload_dir.'/'.$name[$i]))
{
/*** give praise and thanks to the php gods ***/
$messages[] = $name[$i].' uploaded';
$image_path[$i]=$upload_dir.'/'.$name[$i];
}
else
{
/*** an error message ***/
$messages[] = 'Uploading '.$name[$i].' Failed';
}
}
}
}
$image_path_string=serialize($image_path);
$sql = "INSERT INTO memberpost(owner, title, description, city, brand, marketprice, price, phone, image) VALUES ('$owner', '$title','$description','$city','$brand','$marketprice','$price','$phone', '" . $image_path_string . "')";
$result = mysql_query($sql) or die ("Could not insert data into DB: " . mysql_error());
if(sizeof($messages) != 0)
{
foreach($messages as $err)
{
echo $err.'<br />';
}
}
}
?>
Here is configuration file:
<script>
$("#krajee").fileinput({
dropZoneEnabled: false,
uploadAsync: false,
maxFileSize: 2000,
allowedFileExtensions: ["jpg", "gif", "png"],
allowedFileTypes: ["image"],
allowedPreviewTypes: ["image"],
previewSettings: {
image: {width: "240px", height: "auto"},
other: {width: "240px", height: "auto"},
},
showRemove: false,
showUpload: false,
maxFileCount: 10,
uploadUrl: "html/member-post-final.html",
msgFilesTooMany: "Number of files selected for upload ({n}) exceeds maximum allowed limit of {m}. Please retry your upload!",
msgSizeTooLarge: "File {name} ({size} KB) exceeds maximum allowed upload size of {maxSize} KB. Please retry your upload!",
msgInvalidFileExtension: "Invalid extension for file {name}. Only {extensions} files are supported.",
msgFileNotFound: "File {name} not found!",
msgFilePreviewError: "An error occurred while reading the file {name}.",
msgInvalidFileType: "Invalid type for file {name}. Only {types} files are supported.",
msgInvalidFileExtension: "Invalid extension for file {name}. Only {extensions} files are supported.",
msgValidationError:"<span class='text-danger'><i class='glyphicon glyphicon-exclamation-sign'></i> File Upload Error</span>",
msgSelected: "{n} files selected.",
browseLabel: "Chọn ảnh",
initialCaption: "Chọn tối đa 10 ảnh",
});
</script>
Can you show the HTML code? You must create a input with brackets and set the multiple attribute like this:
<input type="file" name="example[]" multiple="multiple">
USE this config
<script>
$("#file-1").fileinput({
uploadUrl: '#', // you must set a valid URL here else you will get an error
allowedFileTypes: ['image', video'],
allowedFileExtensions: ['jpg', 'png', 'gif'],
uploadAsync: false,
initialPreview: false,
maxFileCount: 100,
showBrowse: false,
previewFileType: "image",
browseOnZoneClick: true,
overwriteInitial: false,
maxFileSize: 1000,
showUpload: false,
maxFilesNum: 100,
showRemove: true,
showUpload: false,
removeClass: "btn btn-danger"
});
</script>