首页 后端开发 php教程 php+js实现图片的上传、裁剪、预览、提交示例_PHP

php+js实现图片的上传、裁剪、预览、提交示例_PHP

Jun 01, 2016 pm 12:03 PM
图片上传 图片裁剪

首先用到的语言是php、插件imgareaselect(下载地址),没有太多花哨的样式,index.php代码如下:
复制代码 代码如下:








图片裁剪、预览


//上传图片后,把图片复制到upload文件夹下面
if($_POST){
$photo = $_FILES['img']['name'];
$tmp_addr = $_FILES['img']['tmp_name'];

$path = 'upload/';
$type=array("jpg","gif","jpeg","png");
$tool = substr(strrchr($photo,'.'),1);
if(!in_array(strtolower($tool),$type)){
$text=implode('.',$type);
echo "您只能上传以下类型文件: ",$text,"
";
}else{
$filename = explode(".",$photo); //把上传的文件名以"."好为准做一个数组。
$time = date("m-d-H-i-s"); //取当前上传的时间
$filename[0] = $time; //取文件名
$name = implode(".",$filename); //上传后的文件名
$uploadfile = $path.$name;
$_SESSION['upfile'] = $uploadfile;//上传后的文件名地址
move_uploaded_file($tmp_addr,$uploadfile);
}
// echo $uploadfile;
}
?>







if(isset($_SESSION['upfile'])){?>
php+js实现图片的上传、裁剪、预览、提交示例_PHP
}?>




php+js实现图片的上传、裁剪、预览、提交示例_PHP


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

JavaScript 如何实现图片裁剪功能? JavaScript 如何实现图片裁剪功能? Oct 18, 2023 am 09:54 AM

JavaScript如何实现图片裁剪功能?随着移动互联网的快速发展,图片裁剪功能在许多网站和移动应用中变得越来越常见。JavaScript作为一种前端开发语言,提供了许多库和技术来实现图片裁剪功能。本文将介绍如何使用JavaScript实现图片裁剪功能,并提供具体的代码示例。一、HTML结构设计首先,我们需要在页面中创建一个容器用于显示图片和裁剪框

如何利用vue和Element-plus实现图片的裁剪和旋转功能 如何利用vue和Element-plus实现图片的裁剪和旋转功能 Jul 19, 2023 pm 07:04 PM

如何利用Vue和ElementPlus实现图片的裁剪和旋转功能引言:随着Web应用对于用户体验的要求越来越高,图片的处理成为了不可忽视的一部分。Vue作为一种流行的JavaScript框架,结合ElementPlus这一优秀的UI组件库,为我们提供了丰富的工具和功能,方便快捷地实现图片的裁剪和旋转。本文将以Vue和ElementPlus为基础,为大家介

微信小程序实现图片上传功能 微信小程序实现图片上传功能 Nov 21, 2023 am 09:08 AM

微信小程序实现图片上传功能随着移动互联网的发展,微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景,还支持开发者自定义功能,其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能,并提供具体的代码示例。一、前期准备工作在开始编写代码之前,我们需要先下载并安装微信开发者工具,并注册成为微信开发者。同时,还需要了解微信

VUE3入门实例:制作一个简单的图片裁剪器 VUE3入门实例:制作一个简单的图片裁剪器 Jun 15, 2023 pm 08:45 PM

Vue.js是一款流行的JavaScript前端框架,目前已经推出了最新的版本——Vue3,新版Vue在性能、体积以及开发体验上均有所提升,受到越来越多的开发者欢迎。本文将介绍如何使用Vue3制作一个简单的图片裁剪器。首先,我们需要创建一个Vue项目并安装所需的插件。可以使用VueCLI来创建项目,也可以手动搭建。这里我们以使用VueCLI的方式为例:#

使用CakePHP框架实现图片上传和显示的步骤 使用CakePHP框架实现图片上传和显示的步骤 Jul 29, 2023 pm 04:21 PM

使用CakePHP框架实现图片上传和显示的步骤引言:在现代Web应用程序中,图片上传和显示是常见的功能需求。CakePHP框架为开发者提供了强大的功能和便捷的工具,使得实现图片上传和显示变得简单高效。本文将向您介绍如何使用CakePHP框架来实现图片上传和显示。步骤1:创建文件上传表单首先,我们需要在视图文件中创建一个表单,用于用户上传图片。以下是一个示例的

Vue技术开发中如何处理图片上传和压缩 Vue技术开发中如何处理图片上传和压缩 Oct 08, 2023 am 10:58 AM

Vue技术开发中如何处理图片上传和压缩在现代web应用中,图片上传是一个非常常见的需求。然而,由于网络传输和存储等方面的原因,直接上传原始的高分辨率图片可能会导致上传速度慢和存储空间的大量浪费。因此,对于图片的上传和压缩是非常重要的。在Vue技术开发中,我们可以使用一些现成的解决方案来处理图片上传和压缩。下面将介绍如何使用vue-upload-compone

JavaScript 如何实现图片裁剪并上传功能? JavaScript 如何实现图片裁剪并上传功能? Oct 24, 2023 am 09:15 AM

JavaScript如何实现图片裁剪并上传功能?在Web开发中,经常会遇到需要用户上传并裁剪图片的需求,比如头像上传、图片编辑等。而JavaScript提供了丰富的API和函数,可以帮助我们实现这样的功能。本文将介绍如何使用JavaScript来实现图片裁剪并上传功能,并提供具体的代码示例。首先,我们需要在HTML文件中添加一个用于显示图片的元素,比如一个

如何使用PHP和Vue实现图片上传功能 如何使用PHP和Vue实现图片上传功能 Sep 25, 2023 pm 03:17 PM

如何使用PHP和Vue实现图片上传功能在现代网页开发中,图片上传功能是非常常见的需求。本文将详细介绍如何使用PHP和Vue来实现图片上传功能,并提供具体的代码示例。一、前端部分(Vue)首先需要在前端创建一个用于上传图片的表单。具体代码如下:<template><div><inputtype="fil

See all articles