传照片

ThinkPHP示例之图片上传，包括图片上传、数据库保存、缩略图生成以及图片水印功能演示。 首先需要下载 框架核心 ，然后把示例解压到Web根目录下面，并修改入口文件中的框架入口文件的位置。 导入示例目录下面的data.sql文件到你的数据库，或者执行SQL： CREATE TABLE IF NOT EXISTS `think_photo` ( `id` int(11) NOT NULL AUTO_INCREMENT, `image` varchar(200) NOT NULL, `create_time` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; View Code 修改App/Conf/config.php 中的数据库配置信息，访问 http : //localhost/file/ 复制代码 就会显示： 选择一个图片上传成功后，页面会出现： 生成的大图缩略图右下角带有水印图片。 示例中上传操作的关键方法是IndexAction类的_upload方法，关键代码如下： import("@.ORG.UploadFile"); //导入上传类 $upload = new UploadFile(); //设置上传文件大小 $upload->maxSize = 3292200; /

CKEditor5 本篇博客是在react环境中封装的原生的CKEditor5，VUE环境也可以参考。 基本使用 安装依赖 npm install -- save @ckeditor / ckeditor5 - build - classic or yarn add @ckeditor / ckeditor5 - build - classic 完整的代码 import React , { Component } from 'react' import ClassicEditor from '@ckeditor/ckeditor5-build-classic' class DefaultCKEditor extends Component { componentDidMount ( ) { this . init ( ) ; } init = ( ) => { ClassicEditor . create ( document . querySelector ( '#editor' ) ) . then ( editor => { } ) . catch ( error => { } ) ; } render ( ) { return ( < textarea name = "content" id = "editor" > < / textarea > ) } } export

插入前端代码 jsp <link rel="stylesheet" href="lib/layer/ui/css/layui.css" media="all"> <div class="table-box box2"> <h3><span>上传图片</span></h3> <p class="p1"><a id="photo" class="img"><!-- <img src="images/member_pic1.jpg" /> --></a></p> <div class="p2"> <script src="lib/jquery/1.9.1/jquery.js"></script> <button type="button" class="layui-btn" id="upload"> <i class="layui-icon"></i>上传图片</button> <script src="lib/layer/ui/layui.js"></script> <script> layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#upload' //绑定元素 ,url: 'userController/addImage

最近在写车辆管理的H5页面，遇到图片上传功能，发现移动端没有合适的框架实现上传图片。 我们都知道，html5中有个input type=file元素。用该元素可以实现页面上传文件的功能！！！ 现在我们来研究一下： 首页静态页面 html: <div class="remark"> <span style="display: block;">备注照片：</span> <div class="upImg"> <img :src="remarkimg" alt="" class="upload"> <img src="@/assets/shut.png" alt="" class="del" @click="delRemark" v-show="remarkimg != ''"> </div> <div class="upload_box" v-show="remarkimg == ''"> <img src="@/assets/upload.png" alt=""> <input type="file" @change="remarkPicture($event)" accept="image/*"> </div> </div> css样式： .remark { padding: 30px 30px 30px 0; font-size: 32px; margin-left: 30px;

资料原自网络，本人小小修改一下，备注以后使用。 CS代码 代码 1 /// <summary> 2 /// asp.net上传图片并生成缩略图 3 /// </summary> 4 /// <param name="upImage"> HtmlInputFile控件 </param> 5 /// <param name="sSavePath"> 保存的路径,些为相对服务器路径的下的文件夹 </param> 6 /// <param name="sThumbExtension"> 缩略图的thumb </param> 7 /// <param name="intThumbWidth"> 生成缩略图的宽度 </param> 8 /// <param name="intThumbHeight"> 生成缩略图的高度 </param> 9 /// <returns> 缩略图名称 </returns> 10 public string UpLoadImage(HtmlInputFile upImage, string sSavePath, string sThumbExtension, int intThumbWidth, int intThumbHeight) 11 { 12 #region 13 #region 14 string sThumbFile = "" ; 15 string

在web.config配置 <system.web> <httpRuntime executionTimeout="300" maxRequestLength="204800" useFullyQualifiedRedirectUrl="false"/> </system.web> C# if (FuPhoto.HasFile) { string fileContentType = FuPhoto.PostedFile.ContentType; if (fileContentType == "image/bmp" || fileContentType == "image/gif" || fileContentType == "image/pjpeg") { string name = FuPhoto.PostedFile.FileName; // 客户端文件路径 FileInfo file = new FileInfo(name); // 缩略图文件名称 string fileName_s = DateTime.Now.ToString("yyyyMMddHHmmssS") + file.Name; // 服务器端文件路径 string webFilePath_s = Server.MapPath("../UploadBlogPhoto/" + userID + "/" +

/* OSS图片上传* liwei* */public function oss_uploadImage(){ $config['KeyId']='LTAIMyL4LeeBgTY5'; $config['KeySecret']='jkSN5ycNNPhrhbV0sQvLX61dllXbE7'; $config['Endpoint']='http://oss-cn-beijing.aliyuncs.com'; $config['Bucket']='hidden-danger'; if (request()->has('base64', 'post')) { $data = $_POST['base64']; $result = $this->new_base64_upload($data); if ($result['status'] === 200) { $fileResult = &$result['data']; $filePath = $fileResult['path'] . $fileResult['name']; $ossFileName = implode('/', ['upload/image', date('Ymd'), $fileResult['name']]); try { import('AliyunOss.autoload',EXTEND_PATH,'

### 图片上传 1.前端角度 a.将图片发给后端 ajax 1.前端获取图片信息 文件域 2.将文件信息 存到formdata 3.调用后端写的api接口发送数据 b.接受返回的数据 前端页面显示图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <title>Document</title> </head> <body> <input type="file" id='put'> <img src="" alt="" width="500" > <button id="btn">上传图片</button> </body> <script> var btn = document.getElementById("btn"); let npath='http://10.9.22.225:5500'; btn

### 图片上传 1.前端角度 a.将图片发给后端 ajax 1.前端获取图片信息 文件域 2.将文件信息 存到formdata 3.调用后端写的api接口发送数据 b.接受返回的数据 前端页面显示图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <title>Document</title> </head> <body> <input type="file" id='put'> <img src="" alt="" width="500" > <button id="btn">上传图片</button> </body> <script> var btn = document.getElementById("btn"); let npath='http://10.9.22.225:5500'; btn

### 图片上传 1.前端角度 a.将图片发给后端 ajax 1.前端获取图片信息 文件域 2.将文件信息 存到formdata 3.调用后端写的api接口发送数据 b.接受返回的数据 前端页面显示图片 2.后端角度 目的：将前端上传的图片 1.图片本身应该能被访问（静态资源目录） a.获取图片上传的数据 （multer().singer('hehe') req.file） b.将数据存到文件里面去 fs.writeFile('路径',req.file.buffer) 文件名不重复（时间戳+随机水） 后缀名和源文件保持一致（minitype） 上传的文件大小不能超过一定尺寸（size） 写入路径用绝对路径 path.join(__dirname,'./www') 2.路径信息存到数据里去 3.注意事项 1.数据类型 formdata 2.方法 post 3.正常ajaxpost的数据格式 表单 json 具体代码： 　　　　服务端server.js 　　　　　　 const express = require('express') let app = express() const multer = require('multer') const fs = require('fs') const path = require('path') //single是单图片上传，多图片上传