How to upload and validate a image in php -PHPGURUKUL.

@input

Returns the processed image in requested outputformat. From this event you can add optional hooks.

  methods: {
    setImage: function (file) {
      this.hasImage = true
      this.image = file
    }
  }

@oncomplete

On end of upload.

@onupload

On start of upload.

Accept

Specifies the types of files that can be submitted through the file upload. The types can be valid file extension starting with the STOP character (e.g: «.gif, .jpg, .png») or wildcare file types (e.g. audio/, video/, image/*»). To specify more than one value, separate the values with a comma

  • type: String
  • default: ‘image/*’

Classname

Sets the desired class name for the input element

  • type: String or Array
  • default: ‘fileinput’

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Compiles and minifies lib bundle

yarn run build-lib

Debug

How much to write to the console. 0 = silent. 1 = quiet. 2 = loud

Donotresize

Specifies filetypes that will not be resized. Accepts an array of image’s extension. If only 1 extension, it can be provided directly as a string.

  • type String or Array
  • default: null

How to upload and validate a image in php -phpgurukul.

In this tutorial I will explain how to upload a image and how to validate image extension
Create an HTML form with two text field :

  • One is for Image title with input type text.
  • Second one is for upload image with input type file.For file upload input must be file(type=”file”). This input type show the file select control.

How to upload and validate a image in php -PHPGURUKUL.

HTML form must have following attributes :

  • method=”post”
  • enctype=”multipart/form-data” (The enctype attribute specifies how the form-data should be encoded when submitting it to the server.)

without these attributes , the image upload will not work.

<form name="uploadimage"  enctype="multipart/form-data" method="post">
<table width="100%"  border="0">
<tr>
<th width="26%" height="60" scope="row">Image Title:</th>
<td width="74%"><input type="text" name="imagetitle"  autocomplete="off" class="form-control" required /></td>
</tr>
<tr>
<th height="60" scope="row">Upload Image :</th>
<td><input type="file" name="image"  required /></td>
</tr>
<tr>
<th height="60" scope="row">&nbsp;</th>
<td><input type="submit" value="Submit" name="submit" class="btn-primary" /></td>
</tr>
</table>
</form>

Create a database with name imagesdata. Inside this database we create a table with name tblimages.
SQL Script for tblimages—

CREATE TABLE IF NOT EXISTS `tblimages` (
  `id` int(11) NOT NULL,
  `ImagesTitle` varchar(120) DEFAULT NULL,
  `Image` varchar(150) DEFAULT NULL,
  `PostingDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin1;

Now create a database connection file(config.php)

<?php
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'imagesdata');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>

PHP Script for getting posted  values,  image validation, move images into directory and  insertion data into database

<?php
include_once("config.php");
if(isset($_POST['submit']))
{
// Posted Values
$imgtitle=$_POST['imagetitle'];
$imgfile=$_FILES["image"]["name"];
// get the image extension
$extension = substr($imgfile,strlen($imgfile)-4,strlen($imgfile));
// allowed extensions
$allowed_extensions = array(".jpg","jpeg",".png",".gif");
// Validation for allowed extensions .in_array() function searches an array for a specific value.
if(!in_array($extension,$allowed_extensions))
{
echo "<script>alert('Invalid format. Only jpg / jpeg/ png /gif format allowed');</script>";
}
else
{
//rename the image file
$imgnewfile=md5($imgfile).$extension;
// Code for move image into directory
move_uploaded_file($_FILES["image"]["tmp_name"],"uploadeddata/".$imgnewfile);
// Query for insertion data into database
$query=mysqli_query($con,"insert into tblimages(ImagesTitle,Image) values('$imgtitle','$imgnewfile')");
if($query)
{
echo "<script>alert('Data inserted successfully');</script>";
}
else
{
echo "<script>alert('Data not inserted');</script>";
}}
}
 ?>

How to run this script 

  1. Download the zip
  2. Extract zip file and put in the root directory
  3. open phpmyadmin. Create a db imagesdata then import SQL file(given inside the package)

Input label slot

An optional label tag can be added as a slot

Lints and fixes files

yarn run lint

Maxheight

An integer in pixels for the maximum height allowed for uploaded images, selected images with a greater height than this value will be scaled down before upload.

  • type: Number,
  • default: 1024

Maxwidth

An integer in pixels for the maximum width allowed for uploaded images, selected images with a greater width than this value will be scaled down before upload.

  • type: Number
  • default: 1024

Preview

A boolean flag to toogle an img-tag displaying the uploaded image. When set to false no img-tag is displayed.

  • type: Boolean,
  • default: true

Project setup

yarn install

Quality

A float between 0 and 1.00 for the image quality to use in the resulting image data, around 0.9 is recommended.

  • type: Number,
  • default: 1.00

Roadmap and todos

  1. Progress report
  2. Support multiple files
  3. Implement completion callback
  4. Propper unit testing of events
  5. Clean up scaffolding and project files
  6. Exclude optional dependecies from package

Run your tests

yarn run test

Scaleratio

Allows scaling down to a specified fraction of the original size. (Example: a value of 0.5 will reduce the size by half.) Accepts a decimal value between 0 and 1.

  • type: Number,
  • default: null

Usage

In script entry point

import ImageUploader from 'vue-image-upload-resize'
Vue.use(ImageUploader);

Vue image upload and resize

A Vue.js Plugin Component for client-side image upload with optional resizing and exif-based autorotate.

Оставьте комментарий

Войти