后端图片上传

用到的是simpleUpload.js需要依赖jquery.js、layer.js

<div>
<div class="input-inline">
<input type="text" value="" class="input input-auto" id="pic" name="pic" size="25">
<input type="text" value="" class="input input-auto" placeholder="宽" id="pic_w" name="pic_w" size="2">
<input type="text" value="" class="input input-auto" placeholder="高" id="pic_h" name="pic_h" size="2">&nbsp;<a class="button input-file" href="javascript:void(0);">+ 上传图片
<input size="100" onchange="pic_uploads(this)" type="file" name="pic_fileload">
</a>
</div>
</div>

js代码：

注意：由于需要对文本与的内容经行改变，所以必须采用onchange函数,而不是onclick函数

下面是后端控制器处理：
//上传文件
public function upload(){
if(!empty($_FILES)) {
//如果有文件上传 上传附件
$this->_upload();
}
}

//处理上传文件
protected function _upload()
{
import("@.ORG.Net.UploadFile");
$upload = new UploadFile();
$catalog = toDate(time(),"Ym");
$sServerDir = C("savePath");

if(!file_exists($sServerDir)){mkdir($sServerDir);}

$sServerDir = C("savePath").$catalog."/";
if(!file_exists($sServerDir)){mkdir($sServerDir);}

$upload->maxSize = C("maxSize");
$upload->allowExts = explode(‘,‘,C("allowExts"));
$upload->allowTypes = explode(‘,‘,C("allowTypes"));
$upload->savePath = C("savePath").$catalog."/";
$upload->saveRule = md5(rand(0,10).time().get_client_ip());

//判断是否生成缩微图
if(intval($_REQUEST["filew"]) > 10 && intval($_REQUEST["fileh"]) > 10){
//取得文件宽度
$w = intval($_REQUEST["filew"]);

//取得文件高度
$h = intval($_REQUEST["fileh"]);

$upload->thumb = true;
$upload->thumbSuffix = "";
$upload->thumbMaxWidth = $w;
$upload->thumbMaxHeight = $h;
$upload->thumbCompel = true;
}

//执行上传操作
if(!$upload->upload()) {

// 上传失败
$uploadSuccess = 0;
$ajaxMsg = $upload->getErrorMsg();
}else{
// 上传成功
$uploadSuccess = 1;
// 取得上传返回信息
$server = $upload->getUploadFileInfo();
}

// 判断是否有Ajax方式上传附件
// 并且设置了结果显示Html元素
if(strlen(C("sa_path"))>2){
$style_path = C("sa_path");
}else{
$style_path = "/";
}
// 装载数组
$info = Array();
$info[‘status‘] = $uploadSuccess;
$info[‘info‘] = $ajaxMsg;
$info[‘path‘] = $style_path.$server[0][‘savepath‘].$server[0][‘savename‘];

header("Content-Type: application/json; charset=utf-8");
echo json_encode($info);

}

效果图：

整体流程图：

批量上传的其实与单图上传一样，唯一区别在前端js的处理上不太一样，单图上传成功显示的是一张图片，多图上传上传成功显示多张图片而已。只需要在显示区里调用append函数累计显示多张图片就行了。

差点忘还有thinkphp自带的文件上传类

<?php
// +----------------------------------------------------------------------
// | ThinkPHP
// +----------------------------------------------------------------------
// | Copyright (c) 2008 http://thinkphp.cn All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: liu21st <[email protected]>
// +----------------------------------------------------------------------
// $Id$

/**
+------------------------------------------------------------------------------
* 文件上传类
+------------------------------------------------------------------------------
* @category ORG
* @package ORG
* @subpackage Net
* @author liu21st <[email protected]m>
* @version $Id$
+------------------------------------------------------------------------------
*/
class UploadFile extends Think
{//类定义开始

// 上传文件的最大值
public $maxSize = -1;

// 是否支持多文件上传
public $supportMulti = true;

// 允许上传的文件后缀
// 留空不作后缀检查
public $allowExts = array();

// 允许上传的文件类型
// 留空不做检查
public $allowTypes = array();

// 使用对上传图片进行缩略图处理
public $thumb = false;
// 缩略图最大宽度
public $thumbMaxWidth;
// 缩略图最大高度
public $thumbMaxHeight;
// 缩略图后缀
public $thumbSuffix = ‘_thumb‘;
// 缩略图背景颜色填充 修改
public $thumbCompel = false;
// 压缩图片文件上传
public $zipImages = false;

// 上传文件保存路径
public $savePath = ‘‘;

// 存在同名是否覆盖
public $uploadReplace = false;

// 上传文件命名规则
// 例如可以是 time uniqid com_create_guid 等
// 必须是一个无需任何参数的函数名 可以使用自定义函数
public $saveRule = ‘‘;

// 上传文件Hash规则函数名
// 例如可以是 md5_file sha1_file 等
public $hashType = ‘md5_file‘;

// 错误信息
private $error = ‘‘;

// 上传成功的文件信息
private $uploadFileInfo ;

/**
+----------------------------------------------------------
* 架构函数
+----------------------------------------------------------
* @access public
+----------------------------------------------------------
*/
public function __construct($maxSize=‘‘,$allowExts=‘‘,$allowTypes=‘‘,$savePath=UPLOAD_PATH,$saveRule=‘‘)
{
if(!empty($maxSize) && is_numeric($maxSize)) {
$this->maxSize = $maxSize;
}
if(!empty($allowExts)) {
if(is_array($allowExts)) {
$this->allowExts = array_map(‘strtolower‘,$allowExts);
}else {
$this->allowExts = explode(‘,‘,strtolower($allowExts));
}
}
if(!empty($allowTypes)) {
if(is_array($allowTypes)) {
$this->allowTypes = array_map(‘strtolower‘,$allowTypes);
}else {
$this->allowTypes = explode(‘,‘,strtolower($allowTypes));
}
}
if(!empty($saveRule)) {
$this->saveRule = $saveRule;
}else{
$this->saveRule = C(‘UPLOAD_FILE_RULE‘);
}
$this->savePath = $savePath;
}

/**
+----------------------------------------------------------
* 上传一个文件
+----------------------------------------------------------
* @access private
+----------------------------------------------------------
* @param mixed $name 数据
* @param string $value 数据表名
+----------------------------------------------------------
* @return string
+----------------------------------------------------------
* @throws ThinkExecption
+----------------------------------------------------------
*/
private function save($file)
{
$filename = $file[‘savepath‘].$file[‘savename‘];
if(!$this->uploadReplace && file_exists($filename)) {
// 不覆盖同名文件
$this->error = ‘文件已经存在！‘.$filename;
return false;
}
if(!move_uploaded_file($file[‘tmp_name‘], $filename)) {
$this->error = ‘文件上传保存错误！‘;
return false;
}
if($this->thumb) {
// 生成图像缩略图
import("@.ORG.Util.Image");
$image = Image::getImageInfo($filename);
if(false !== $image) {
//是图像文件生成缩略图
$thumbWidth = explode(‘,‘,$this->thumbMaxWidth);
$thumbHeight = explode(‘,‘,$this->thumbMaxHeight);
$thumbSuffix = explode(‘,‘,$this->thumbSuffix);
$thumbCompel = $this->thumbCompel;
for($i=0,$len=count($thumbWidth); $i<$len; $i++) {
$thumbname = Image::thumb($filename,‘‘,‘‘,$thumbWidth[$i],$thumbHeight[$i],true,$thumbSuffix[$i],$thumbCompel);
}
}
}
if($this->zipImags) {
// TODO 对图片压缩包在线解压

}
return true;
}

/**
+----------------------------------------------------------
* 上传文件
+----------------------------------------------------------
* @access public
+----------------------------------------------------------
* @param string $savePath 上传文件保存路径
+----------------------------------------------------------
* @return string
+----------------------------------------------------------
* @throws ThinkExecption
+----------------------------------------------------------
*/
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{
$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‘])) {
//登记上传文件的扩展信息
$file[‘extension‘] = $this->getExt($file[‘name‘]);
$file[‘savepath‘] = $savePath;
$file[‘savename‘] = $this->getSaveName($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;
}

//保存上传文件
if(!$this->save($file)) {
//$this->error = $file[‘error‘];
return false;
}
if(function_exists($this->hashType)) {
$fun = $this->hashType;
$file[‘hash‘] = $fun($file[‘savepath‘].$file[‘savename‘]);
}
//上传成功后保存文件信息，供其他地方调用
unset($file[‘tmp_name‘],$file[‘error‘]);
$fileInfo[] = $file;
$isUpload = true;
}
}
if($isUpload) {
$this->uploadFileInfo = $fileInfo;
return true;
}else {
$this->error = ‘没有选择上传文件‘;
return false;
}
}

/**
+----------------------------------------------------------
* 转换上传文件数组变量为正确的方式
+----------------------------------------------------------
* @access private
+----------------------------------------------------------
* @param array $files 上传的文件变量
+----------------------------------------------------------
* @return array
+----------------------------------------------------------
* @throws ThinkExecption
+----------------------------------------------------------
*/
private function dealFiles($files) {
$fileArray = array();
foreach ($files as $file){
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 = $files;
}
break;
}
return $fileArray;
}

/**
+----------------------------------------------------------
* 获取错误代码信息
+----------------------------------------------------------
* @access protected
+----------------------------------------------------------
* @param string $errorNo 错误号码
+----------------------------------------------------------
* @return void
+----------------------------------------------------------
* @throws ThinkExecption
+----------------------------------------------------------
*/
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‘];
}
}
return $saveName;
}

/**
+----------------------------------------------------------
* 检查上传的文件类型是否合法
+----------------------------------------------------------
* @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);
}
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;
}

}//类定义结束
?>

原文地址：https://www.cnblogs.com/qiaoliang151715/p/8321340.html

时间： 2024-11-01 22:45:55

后端图片上传的相关文章

nodejs关于前后端图片上传的思路

### 图片上传 1.前端角度 a.将图片发给后端 ajax 1.前端获取图片信息 文件域 2.将文件信息 存到formdata 3.调用后端写的api接口发送数据 b.接受返回的数据 前端页面显示图片 2.后端角度 目的:将前端上传的图片 1.图片本身应该能被访问(静态资源目录) a.获取图片上传的数据 (multer().singer('hehe') req.file) b.将数据存到文件里面去 fs.writeFile('路径',req.file.buffer) 文件名不重复(时间戳+随机

nodejs关于前后端图片上传的思路及实现代码

### 图片上传 1.前端角度 a.将图片发给后端 ajax 1.前端获取图片信息 文件域 2.将文件信息 存到formdata 3.调用后端写的api接口发送数据 b.接受返回的数据 前端页面显示图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&qu

Jersey后端服务接收ajax前端的图片上传

近期的项目里需要在前端上传图片后端接收处理.前端JSP页面使用Ajax上传图片后端使用Jersey框架提供restful接口接收处理图片. 一.前端的处理 jsp页面中图片上传没有使用form表单而是直接使用file类型的input控件 <input type="file" name="file" class="inpTxtA" value="" id="appLogo"/> <input

UEditor之基于Java图片上传前后端源码研究

开心一笑 一定要快乐学习,所以学习之前先看个笑话: 刚来北京,租了一个小房,一楼,上淘宝买衣服,选了付钱了联系卖家:"我已付款,请发货."谁知那货直接说:"我看到你地址了,自己上楼来拿吧!我就在你楼上." 拿你妹,老子付了邮费的...送下来. 提出问题 Ueditor前后端源码的学习和简单的研究??? 解决问题 前提: 假如你已经看了我的前一篇文章,这一点很重要的啊,当然不看也可以,因为你已经是一个高手,就像我一样,哈哈: 假如你已经安装tomcat服务器: 假如你

UEditor之基于Java图片上传前后端源码研究 （转）

http://blog.csdn.net/huangwenyi1010/article/details/51637439 这是我的项目目录 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调用哪些代码, 不卖关子,很明显,会调用后端的controller.jsp代码,因为我们已经在ueditor.config配置了: // 服务器统一请求接口路径 , serverUrl: URL

jQuery图片上传前先在本地预览（不经过后端处理）

前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实

图片上传并回显后端篇

图片上传并回显后端篇 我们先看一下效果 继上一篇的图片上传和回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传的文件,是以什么样的形式上传到服务器,难道也是一张图片?等下我们来揭晓 我们在实战开始前呢,我们先做一下准备工作,比如新建一个java web工程,如果你不懂这个的话,那我建议你先学一下Javaweb,可以去我的公众号找一下这方面的教程.我们就给我们的工程起名为UpImg,我们再给他建一个web包和util包,再把我们以前前端做的图片回显的代码拷

百度ueditor的图片上传，前后端交互使用

百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor.config.js即可.这里就不多说. 至于图片上传,ueditor 设计的时候是考虑和后端交互的,所以会看到可以下载什么php,java版本,还有很多网上会说道有什么后端配置文件,改那改这的,但是实际上后端存储业务是按照公司实际来的,实践起来并不顺利. 本文重点讲述的只用前端文件和ueditor.

百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配置Nginx代理.     在实际使用过程中,遇到了太多的问题,因此有必要梳理和总结下. 1. 先说百度UEditor在Java环境中的使用:1.1   Html页面或者Freemarker模版里,引入百度UEditor的相关JS和CSS,如下 <script type="text/javas