- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22%3E ;
- <html xmlns="http://www.w3.org/1999/xhtml"> http://www.w3.org/1999/xhtml%22%3E ;
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>PHP+jQuery+html5 实现图片选取裁剪上传 </title>
- <meta name="keywords" content="裁剪上传, 手机图片上传" />
- <meta name="description" content="" />
- <link rel="stylesheet" type="text/css" href="./css/common.css" />
- <link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script> http://www.sucaihuo.com/Public/js/other/jquery.js%22%3E%3C/script%3E ;
- <script src="js/jquery.Jcrop.min.js"></script>
- <script src="js/script.js"></script>
- </head>
- <body>
- <div class="container">
- <div class="demo">
- <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="return checkForm()">
- <!-- hidden crop params -->
- <input type="hidden" id="x1" name="x1"autocomplete="off" />
- <input type="hidden" id="y1" name="y1" autocomplete="off"/>
- <input type="hidden" id="x2" name="x2"autocomplete="off" />
- <input type="hidden" id="y2" name="y2"autocomplete="off" />
- <a class=btn_addPic href="javascript:void(0);"><span><em>+</em> 添加图片 </span> <input class="filePrew" title="支持 jpg,jpeg,gif,png 格式, 文件小于 1M" type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></a>
- <div class="error"> 注意: 上传前, 先截图 </div>
- <div class="step2">
- <img id="preview" />
- <div class="info">
- <ul>
- <li><input type="hidden" id="filesize" name="filesize" class="input" autocomplete="off" /></li>
- <li><input type="hidden" id="filetype" name="filetype" class="input"autocomplete="off"/></li>
- <li><input type="hidden" id="filedim" name="filedim" class="input"autocomplete="off"/></li>
- <li><input type="hidden" id="w" name="w" class="input"autocomplete="off"/></li>
- <li><input type="hidden" id="h" name="h" class="input"autocomplete="off"/></li>
- </ul>
- </div>
- <input type="submit" value="上传" class="btn" />
- </div>
- </form>
- </div>
- </div>
- </body>
- </html>
- upload.php
- <?php
- header("Content-type: text/html; charset=utf-8");
- $maxSize = 1024 * 1024; //1M 设置附件上传大小
- $allowExts = array("gif", "jpg", "jpeg", "png"); // 设置附件上传类型
- $file_save = "upload/";
- include_once("UploadFile.class.php");
- $upload = new UploadFile(); // 实例化上传类
- $upload->maxSize = $maxSize;
- $upload->allowExts = $allowExts;
- $upload->savePath = $file_save; // 设置附件
- $upload->saveRule = time() . sprintf('%04s', mt_rand(0, 1000));
- if (!$upload->upload()) {// 上传错误提示错误信息
- $errormsg = $upload->getErrorMsg();
- $arr = array(
- 'error' => $errormsg, // 返回错误
- );
- echo json_encode($arr);
- exit;
- } else {// 上传成功 获取上传文件信息
- $info = $upload->getUploadFileInfo();
- $imgurl = $info[0]['savename'];
- $x = $_POST['x1'];
- $y = $_POST['y1'];
- $x2 = $_POST['x2'];
- $y2 = $_POST['y2'];
- $w = $_POST['w'];
- $h = $_POST['h'];
- include_once("jcrop_image.class.php");
- $file_save = "upload/";
- $pic_name = $file_save . $imgurl;
- $crop = new jcrop_image($file_save, $pic_name, $x, $y, $w, $h, $w, $h);
- $file = $crop->crop();
- echo "上传后的原图片:<p><img src='" . $pic_name . "'/></p>";
- echo "缩略图:<p><img src='" . $file . "'/></p>";
- echo "<p><input type='button'value='返回'onclick='history.go(-1)'/></p>";
- }
- ?>
个人头像上传根据需求进行修改
本人没有把代码贴完整
如果有哪位同学需要的话, 可以给我发邮箱
需要 example: 我需要个人头像上传兼容 pc 手机端上传
话不多说, 贴出来一些代码仅供参考
- UploadFile.class.php
- <?php
- /* 文件上传类
- * @category ORG
- * @package ORG
- * @subpackage Net
- * @author liu21st <liu21st@gmail.com>
- */
- class UploadFile {// 类定义开始
- private $config = array(
- 'maxSize' => -1, // 上传文件的最大值
- 'supportMulti' => true, // 是否支持多文件上传
- 'allowExts' => array(), // 允许上传的文件后缀 留空不作后缀检查
- 'allowTypes' => array(), // 允许上传的文件类型 留空不做检查
- 'thumb' => false, // 使用对上传图片进行缩略图处理
- 'imageClassPath' => 'ORG.Util.Image', // 图库类包路径
- 'thumbMaxWidth' => '',// 缩略图最大宽度'thumbMaxHeight'=>'',// 缩略图最大高度
- 'thumbPrefix' => 'thumb_',// 缩略图前缀
- 'thumbSuffix' => '','thumbPath'=>'',// 缩略图保存路径
- 'thumbFile' => '',// 缩略图文件名'thumbExt'=>'',// 缩略图扩展名
- 'thumbRemoveOrigin' => false,// 是否移除原图
- 'zipImages' => false,// 压缩图片文件上传
- 'autoSub' => false,// 启用子目录保存文件
- 'subType' => 'hash',// 子目录创建方式 可以使用 hash date custom
- 'subDir' => '', // 子目录名称 subType 为 custom 方式后有效'dateFormat'=>'Ymd','hashLevel'=> 1, // hash 的目录层次'savePath'=>'',// 上传文件保存路径
- 'autoCheck' => true, // 是否自动检查附件
- 'uploadReplace' => false,// 存在同名是否覆盖
- 'saveRule' => 'uniqid',// 上传文件命名规则
- 'hashType' => 'md5_file',// 上传文件 Hash 规则函数名
- );
- // 错误信息
- private $error = '';
- // 上传成功的文件信息
- private $uploadFileInfo ;
- public function __get($name){
- if(isset($this->config[$name])) {
- return $this->config[$name];
- }
- return null;
- }
- public function __set($name,$value){
- if(isset($this->config[$name])) {
- $this->config[$name] = $value;
- }
- }
- public function __isset($name){
- return isset($this->config[$name]);
- }
- /**
- * 架构函数
- * @access public
- * @param array $config 上传参数
- */
- public function __construct($config=array()) {
- if(is_array($config)) {
- $this->config = array_merge($this->config,$config);
- }
- }
- /**
- * 上传一个文件
- * @access public
- * @param mixed $name 数据
- * @param string $value 数据表名
- * @return string
- */
- private function save($file) {
- $filename = $file['savepath'].$file['savename'];
- if(!$this->uploadReplace && is_file($filename)) {
- // 不覆盖同名文件
- $this->error = '文件已经存在!'.$filename;
- return false;
- }
- // 如果是图像文件 检测文件格式
- if( in_array(strtolower($file['extension']),array('gif','jpg','jpeg','bmp','png','swf'))) {
- $info = getimagesize($file['tmp_name']);
- if(false === $info || ('gif' == strtolower($file['extension']) && empty($info['bits']))){
- $this->error = '非法图像文件';
- return false;
- }
- }
- if(!move_uploaded_file($file['tmp_name'], $this->autoCharset($filename,'utf-8','gbk'))) {
- $this->error = '文件上传保存错误!';
- return false;
- }
- if($this->thumb && in_array(strtolower($file['extension']),array('gif','jpg','jpeg','bmp','png'))) {
- $image = getimagesize($filename);
- if(false !== $image) {
- // 是图像文件生成缩略图
- $thumbWidth = explode(',',$this->thumbMaxWidth);
- $thumbHeight = explode(',',$this->thumbMaxHeight);
- $thumbPrefix = explode(',',$this->thumbPrefix);
- $thumbSuffix = explode(',',$this->thumbSuffix);
- $thumbFile = explode(',',$this->thumbFile);
- $thumbPath = $this->thumbPath?$this->thumbPath:dirname($filename).'/';
- $thumbExt = $this->thumbExt ? $this->thumbExt : $file['extension']; // 自定义缩略图扩展名
- // 生成图像缩略图
- import($this->imageClassPath);
- for($i=0,$len=count($thumbWidth); $i<$len; $i++) {
- if(!empty($thumbFile[$i])) {
- $thumbname = $thumbFile[$i];
- }else{
- $prefix = isset($thumbPrefix[$i])?$thumbPrefix[$i]:$thumbPrefix[0];
- $suffix = isset($thumbSuffix[$i])?$thumbSuffix[$i]:$thumbSuffix[0];
- $thumbname = $prefix.basename($filename,'.'.$file['extension']).$suffix;
- }
- Image::thumb($filename,$thumbPath.$thumbname.'.'.$thumbExt,'',$thumbWidth[$i],$thumbHeight[$i],true);
- }
- if($this->thumbRemoveOrigin) {
- // 生成缩略图之后删除原图
- unlink($filename);
- }
- }
- }
- if($this->zipImags) {
- // TODO 对图片压缩包在线解压
- }
- return true;
- }
- /**
- * 上传所有文件
- * @access public
- * @param string $savePath 上传文件保存路径
- * @return string
- */
- public function upload($savePath ='') {
- // 如果不指定保存文件名, 则由系统默认
- if(empty($savePath))
- $savePath = $this->savePath;
- // 检查上传目录
- if(!is_dir($savePath)) {
- // 检查目录是否编码后的
- if(is_dir(base64_decode($savePath))) {
- $savePath = base64_decode($savePath);
- }else{
- // 尝试创建目录
- if(!mkdir($savePath)){
- $this->error = '上传目录'.$savePath.'不存在';
- return false;
- }
- }
- }else {
- if(!is_writeable($savePath)) {
- $this->error = '上传目录'.$savePath.'不可写';
- return false;
- }
- }
- $fileInfo = array();
- $isUpload = false;
- // 获取上传的文件信息
- // 对 $_FILES 数组信息处理
- $files = $this->dealFiles($_FILES);
- foreach($files as $key => $file) {
- // 过滤无效的上传
- if(!empty($file['name'])) {
- // 登记上传文件的扩展信息
- if(!isset($file['key'])) $file['key'] = $key;
- $file['extension'] = $this->getExt($file['name']);
- $file['savepath'] = $savePath;
- $file['savename'] = $this->getSaveName($file);
- // 自动检查附件
- if($this->autoCheck) {
- if(!$this->check($file))
- return false;
- }
- // 保存上传文件
- if(!$this->save($file)) return false;
- if(function_exists($this->hashType)) {
- $fun = $this->hashType;
- $file['hash'] = $fun($this->autoCharset($file['savepath'].$file['savename'],'utf-8','gbk'));
- }
- // 上传成功后保存文件信息, 供其他地方调用
- unset($file['tmp_name'],$file['error']);
- $fileInfo[] = $file;
- $isUpload = true;
- }
- }
- if($isUpload) {
- $this->uploadFileInfo = $fileInfo;
- return true;
- }else {
- $this->error = '没有选择上传文件';
- return false;
- }
- }
- /**
- * 上传单个上传字段中的文件 支持多附件
- * @access public
- * @param array $file 上传文件信息
- * @param string $savePath 上传文件保存路径
- * @return string
- */
- public function uploadOne($file,$savePath=''){
- // 如果不指定保存文件名, 则由系统默认
- if(empty($savePath))
- $savePath = $this->savePath;
- // 检查上传目录
- if(!is_dir($savePath)) {
- // 尝试创建目录
- if(!mkdir($savePath,0777,true)){
- $this->error = '上传目录'.$savePath.'不存在';
- return false;
- }
- }else {
- if(!is_writeable($savePath)) {
- $this->error = '上传目录'.$savePath.'不可写';
- return false;
- }
- }
- // 过滤无效的上传
- if(!empty($file['name'])) {
- $fileArray = array();
- if(is_array($file['name'])) {
- $keys = array_keys($file);
- $count = count($file['name']);
- for ($i=0; $i<$count; $i++) {
- foreach ($keys as $key)
- $fileArray[$i][$key] = $file[$key][$i];
- }
- }else{
- $fileArray[] = $file;
- }
- $info = array();
- foreach ($fileArray as $key=>$file){
- // 登记上传文件的扩展信息
- $file['extension'] = $this->getExt($file['name']);
- $file['savepath'] = $savePath;
- $file['savename'] = $this->getSaveName($file);
- // 自动检查附件
- if($this->autoCheck) {
- if(!$this->check($file))
- return false;
- }
- // 保存上传文件
- if(!$this->save($file)) return false;
- if(function_exists($this->hashType)) {
- $fun = $this->hashType;
- $file['hash'] = $fun($this->autoCharset($file['savepath'].$file['savename'],'utf-8','gbk'));
- }
- unset($file['tmp_name'],$file['error']);
- $info[] = $file;
- }
- // 返回上传的文件信息
- return $info;
- }else {
- $this->error = '没有选择上传文件';
- return false;
- }
- }
- /**
- * 转换上传文件数组变量为正确的方式
- * @access private
- * @param array $files 上传的文件变量
- * @return array
- */
- private function dealFiles($files) {
- $fileArray = array();
- $n = 0;
- foreach ($files as $key=>$file){
- if(is_array($file['name'])) {
- $keys = array_keys($file);
- $count = count($file['name']);
- for ($i=0; $i<$count; $i++) {
- $fileArray[$n]['key'] = $key;
- foreach ($keys as $_key){
- $fileArray[$n][$_key] = $file[$_key][$i];
- }
- $n++;
- }
- }else{
- $fileArray[$key] = $file;
- }
- }
- return $fileArray;
- }
- /**
- * 获取错误代码信息
- * @access public
- * @param string $errorNo 错误号码
- * @return void
- */
- protected function error($errorNo) {
- switch($errorNo) {
- case 1:
- $this->error = '上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值';
- break;
- case 2:
- $this->error = '上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值';
- break;
- case 3:
- $this->error = '文件只有部分被上传';
- break;
- case 4:
- $this->error = '没有文件被上传';
- break;
- case 6:
- $this->error = '找不到临时文件夹';
- break;
- case 7:
- $this->error = '文件写入失败';
- break;
- default:
- $this->error = '未知上传错误!';
- }
- return ;
- }
- /**
- * 根据上传文件命名规则取得保存文件名
- * @access private
- * @param string $filename 数据
- * @return string
- */
- private function getSaveName($filename) {
- $rule = $this->saveRule;
- if(empty($rule)) {// 没有定义命名规则, 则保持文件名不变
- $saveName = $filename['name'];
- }else {
- if(function_exists($rule)) {
- // 使用函数生成一个唯一文件标识号
- $saveName = $rule().".".$filename['extension'];
- }else {
- // 使用给定的文件名作为标识号
- $saveName = $rule.".".$filename['extension'];
- }
- }
- if($this->autoSub) {
- // 使用子目录保存文件
- $filename['savename'] = $saveName;
- $saveName = $this->getSubName($filename).$saveName;
- }
- return $saveName;
- }
- /**
- * 获取子目录的名称
- * @access private
- * @param array $file 上传的文件信息
- * @return string
- */
- private function getSubName($file) {
- switch($this->subType) {
- case 'custom':
- $dir = $this->subDir;
- break;
- case 'date':
- $dir = date($this->dateFormat,time()).'/';
- break;
- case 'hash':
- default:
- $name = md5($file['savename']);
- $dir = '';
- for($i=0;$i<$this->hashLevel;$i++) {
- $dir .= $name{$i}.'/';
- }
- break;
- }
- if(!is_dir($file['savepath'].$dir)) {
- mkdir($file['savepath'].$dir,0777,true);
- }
- return $dir;
- }
- /**
- * 检查上传的文件
- * @access private
- * @param array $file 文件信息
- * @return boolean
- */
- private function check($file) {
- if($file['error']!== 0) {
- // 文件上传失败
- // 捕获错误代码
- $this->error($file['error']);
- return false;
- }
- // 文件上传成功, 进行自定义规则检查
- // 检查文件大小
- if(!$this->checkSize($file['size'])) {
- $this->error = '上传文件大小不符!';
- return false;
- }
- // 检查文件 Mime 类型
- if(!$this->checkType($file['type'])) {
- $this->error = '上传文件 MIME 类型不允许!';
- return false;
- }
- // 检查文件类型
- if(!$this->checkExt($file['extension'])) {
- $this->error ='上传文件类型不允许';
- return false;
- }
- // 检查是否合法上传
- if(!$this->checkUpload($file['tmp_name'])) {
- $this->error = '非法上传文件!';
- return false;
- }
- return true;
- }
- // 自动转换字符集 支持数组转换
- private function autoCharset($fContents, $from='gbk', $to='utf-8') {
- $from = strtoupper($from) == 'UTF8' ? 'utf-8' : $from;
- $to = strtoupper($to) == 'UTF8' ? 'utf-8' : $to;
- if (strtoupper($from) === strtoupper($to) || empty($fContents) || (is_scalar($fContents) && !is_string($fContents))) {
- // 如果编码相同或者非字符串标量则不转换
- return $fContents;
- }
- if (function_exists('mb_convert_encoding')) {
- return mb_convert_encoding($fContents, $to, $from);
- } elseif (function_exists('iconv')) {
- return iconv($from, $to, $fContents);
- } else {
- return $fContents;
- }
- }
- /**
- * 检查上传的文件类型是否合法
- * @access private
- * @param string $type 数据
- * @return boolean
- */
- private function checkType($type) {
- if(!empty($this->allowTypes))
- return in_array(strtolower($type),$this->allowTypes);
- return true;
- }
- /**
- * 检查上传的文件后缀是否合法
- * @access private
- * @param string $ext 后缀名
- * @return boolean
- */
- private function checkExt($ext) {
- if(!empty($this->allowExts))
- return in_array(strtolower($ext),$this->allowExts,true);
- return true;
- }
- /**
- * 检查文件大小是否合法
- * @access private
- * @param integer $size 数据
- * @return boolean
- */
- private function checkSize($size) {
- return !($size> $this->maxSize) || (-1 == $this->maxSize);
- }
- /**
- * 检查文件是否非法提交
- * @access private
- * @param string $filename 文件名
- * @return boolean
- */
- private function checkUpload($filename) {
- return is_uploaded_file($filename);
- }
- /**
- * 取得上传文件的后缀
- * @access private
- * @param string $filename 文件名
- * @return boolean
- */
- private function getExt($filename) {
- $pathinfo = pathinfo($filename);
- return $pathinfo['extension'];
- }
- /**
- * 取得上传文件的信息
- * @access public
- * @return array
- */
- public function getUploadFileInfo() {
- return $this->uploadFileInfo;
- }
- /**
- * 取得最后一次错误信息
- * @access public
- * @return string
- */
- public function getErrorMsg() {
- return $this->error;
- }
- }
来源: http://www.qdfuns.com/article/20138/cbe657a3b98856ba3f68dce12b04887a.html