How to store uploaded file name with path into database
Question
I'm using dropzone api to upload a image file(drag and drop). When I upload the file, the form automatically gets submitted. But I have two more text field also there in my form. And also I want to store the uploaded file path into database. How can I do that. This is my code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!-- Add Dropzone -->
<link rel="stylesheet" type="text/css" href="css/dropzone.css" />
<script type="text/javascript" src="js/dropzone.js"></script>
</head>
<body>
<h1>Drag&Drop Multiple Files Upload using DropzoneJS and PHP by CodexWorld</h1>
<div class="image_upload_div">
<form action="upload.php" class="dropzone">
</form>
<input type="text" name="text1">
<input type="text" name="text2">
</div>
</body>
</html>
My upload.php file
<?php
if(!empty($_FILES)){
//database configuration
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName = 'sample';
//connect with the database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if($mysqli->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
$targetDir = "uploads/";
$fileName = $_FILES['file']['name'];
$targetFile = $targetDir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
//insert file information into db table
$conn->query("INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')");
}
}
?>
3 answers
solution1
0 2016-06-03 04:52:29
use this way
<input type="file" name="file" id="file" /> <input type="submit" value="Upload Image" name="submit"> $file=$_FILES['file']['name']; $dest="uploads/$file"; $src=$_FILES['file']['tmp_name']; move_uploaded_file($src,$dest); $result=mysql_query("insert into tablename(dbfieldname) values('$dest')");
solution2
0 2016-06-03 10:11:05
First you have to create a div and remove the dropzone class from the form to stop it attaching to the entire form.
<div class="dropzone dropzone-previews dzUpload" id="my-awesome-dropzone" name = "files"></div>
Then you must change the javascript to attach the dropzone programatically.
var dz = new Dropzone('#my-awesome-dropzone',{
url: "fileUploader.php",
...
When the form submits, you must prevent the default action (in this case the form submitting.)
$('#form').on('submit', function(event) {
if(dz.getQueuedFiles().length > 0) {
event.preventDefault();
dz.processQueue();
}
});
Now, instead you are stopping the form from submitting and you are processing the queue, this causes the 'fileUploader.php' script to run which you can use to validate the files.
If you are happy with the files you can move them to your desired location and then return the filenames by storing them as an array and echoing json_encode($files)
This will give you a response in your javascript which you then use the JSON.parse() function to convert it into an object.
Now you have the response so to add the file to your database, you can create an extra input in your form with the hidden attribute so the user cant see it. You can then send the filenames from your javascript to the hidden input box in your form by using jQuery to do this.
$("#hiddenInput").val(files);
If you do this for each file, you could append the hidden input each time. You can submit the form once the queue is complete by using this function.
queuecomplete: function(file) {
$('#form).submit();
$('#submitButton').click();
},
Now this is just like submitting a normal form, and you can explode the filenames into an array and loop round adding each one to your database
If you need any extra help feel free to contact me as my explanation is not great :-)
solution3
0 2016-06-07 08:26:04
<input type="file" name="file" id="file" /> <input type="submit" value="Upload Image" name="submit"> <?php $file=$_FILES['file']['name']; $dest="uploads/$file"; $src=$_FILES['file']['tmp_name']; move_uploaded_file($src,$dest); $result=mysql_query("insert into tablename(dbfieldname) values('$dest')"); ?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.