首頁 後端開發 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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何利用vue和Element-plus實作圖片的裁切與旋轉功能 如何利用vue和Element-plus實作圖片的裁切與旋轉功能 Jul 19, 2023 pm 07:04 PM

如何利用Vue和ElementPlus實現圖片的裁剪和旋轉功能引言:隨著Web應用對於使用者體驗的要求越來越高,圖片的處理成為了不可忽視的一部分。 Vue作為一個受歡迎的JavaScript框架,結合ElementPlus這個優秀的UI元件庫,為我們提供了豐富的工具和功能,方便快速地實現圖片的裁剪和旋轉。本文將以Vue和ElementPlus為基礎,並為大家介

JavaScript 如何實作圖片裁切功能? JavaScript 如何實作圖片裁切功能? Oct 18, 2023 am 09:54 AM

JavaScript如何實現圖片裁切功能?隨著行動互聯網的快速發展,圖片裁剪功能在許多網站和行動應用程式中變得越來越常見。 JavaScript作為一種前端開發語言,提供了許多函式庫和技術來實現圖片裁剪功能。本文將介紹如何使用JavaScript實作圖片裁切功能,並提供具體的程式碼範例。一、HTML結構設計首先,我們需要在頁面中建立一個容器用於顯示圖片和裁剪框

微信小程式實現圖片上傳功能 微信小程式實現圖片上傳功能 Nov 21, 2023 am 09:08 AM

微信小程式實現圖片上傳功能隨著行動網路的發展,微信小程式已經成為了人們生活中不可或缺的一部分。微信小程式不僅提供了豐富的應用場景,還支援開發者自訂功能,其中包括圖片上傳功能。本文將介紹如何在微信小程式中實作圖片上傳功能,並提供具體的程式碼範例。一、前期準備工作在開始編寫程式碼之前,我們需要先下載並安裝微信開發者工具,並註冊成為微信開發者。同時,也需要了解微信

使用CakePHP框架實現圖片上傳和顯示的步驟 使用CakePHP框架實現圖片上傳和顯示的步驟 Jul 29, 2023 pm 04:21 PM

使用CakePHP框架實現圖片上傳和顯示的步驟引言:在現代Web應用程式中,圖片上傳和顯示是常見的功能需求。 CakePHP框架為開發者提供了強大的功能和便利的工具,使得實現圖片上傳和顯示變得簡單且有效率。本文將向您介紹如何使用CakePHP框架來實現圖片上傳和顯示。步驟1:建立文件上傳表單首先,我們需要在檢視文件中建立表單,以便使用者上傳圖片。以下是一個範例的

VUE3入門實例:製作一個簡單的圖片裁剪器 VUE3入門實例:製作一個簡單的圖片裁剪器 Jun 15, 2023 pm 08:45 PM

Vue.js是一款受歡迎的JavaScript前端框架,目前已經推出了最新的版本-Vue3,新版Vue在效能、體積以及開發體驗上均有所提升,受到越來越多的開發者歡迎。本文將介紹如何使用Vue3製作一個簡單的圖片裁剪器。首先,我們需要建立一個Vue專案並安裝所需的插件。可以使用VueCLI來建立項目,也可以手動搭建。這裡我們以使用VueCLI的方式為例:#

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和Imagick實現圖片的裁剪和縮放 透過php和Imagick實現圖片的裁剪和縮放 Jul 28, 2023 pm 06:18 PM

透過PHP和Imagick實現圖片的裁剪和縮放摘要:在Web開發中,經常需要對圖片進行裁剪和縮放以適應各種需求。本文將介紹如何使用PHP和Imagick庫來實現圖片的裁剪和縮放,並提供程式碼範例供讀者參考。引言:隨著網路的快速發展,圖片在網頁中扮演越來越重要的角色。然而,由於每個網頁都有各自的佈局和尺寸要求,因此往往需要對圖片進行裁剪和縮放來適應不同的場景。 P

See all articles