产品新增:多图上传

1:html的更改

在 type=file的input框中添加multiple="multiple" name属性中必须添加[] ,否则$_FILES只能接收最后一张

新添加<ul class="images"></ul>标签,该标签用来显示上传的图片

2:js的更改

循环将每张图片进行监听,监听完毕之后将每张图拼接到对对应的li中,将li追加到 .images目标元素内部的后面

代码:

var str="<li>"; //e.target.result就是最后的路径地址

str+="<img src='"+e.target.result+"'/>"; //表示图片

str+="<input type='hidden' name='check_images[]' value='"+j+"'/>"

//用来存储需要添加的图片的下标,功能:后期在php页面用来确定该图片是否被手动删除

str+="<div><img class='delete' src='resources/images/fancy_close.png'/></div>";

//实现图片的删除功能

str+="</li>";

$(".images").append(str);

点击对应的delete将对应的li删除,remove()

3;php文件更改:

a: 通过判断$_POST["check_images"] 确定是否有图片新增 ,定义数组$images用来存储需要上传的图片

b:如果有新图片,循环判断$_FILES中的文件是否有被手动删除

c: 如果没有被删除 下面执行的代码功能:

定义数组$images $thunb_images $water_images 用来存放原图 缩略图 水印图

判断文件的格式 判断文件的大小

将图片从临时路径中转移到永久路径中

将图片新的路径保存到$images数组中

调用缩略图函数,然后将缩略图的路径存放在$thunb_images数组中

调用水印图函数,然后将水印图的路径存放在$water_images数组中

d:循环完之后,

将$images,数组转化为json格式的字符串 追加到$_POST["images"]中

将$thumb_images,数组转化为json格式的字符串 追加到$_POST["thumb_images"]中

将$water_images,数组转化为json格式的字符串 追加到$_POST["water_images"]中

e:新增,新增成功跳转,新增失败,提示错误信息

多图上传 删除:

1:判断是否有传递id

2:如果有对应的id,先查询id对应的记录$arr

3:将id对应的记录删除

4:如果删除成功,将$arr表示图片的元素(包括原图 缩略图 水印图)由字符串转化为数组形式

5:循环表示图片的数组,将图片依次删除 unlink("文件的路径"),删除完之后跳转

多图修改: (添加水印图 缩略图)

1: html的更改

在 type=file的input框中添加multiple="multiple" name属性中必须添加[] ,否则$_FILES只能接收最后一张

在对应位置添加ul,在ul中添加通过foreach循环li,将产品对应的原图循环显示在页面中,每一张图都对应一个隐藏域,该隐藏域添加name= "ready_check_image[]" ,并设置value的值,值为每一张图片的下标

2:js的更改

当type=file的内容改变之后,将上传的每一张图片显示ul的li中,每一张图片设置隐藏域,隐藏域添加neme="check_image[]" ,并设置value值,值为每一站图片对应的下标

3:php的更改:

a:定义$images数组 $thumb_images数组 $water_images 数组

//处理修改中新增图片的步骤

b: 判断是否有上传新的图片,通过判断$_POST["check_image"]是否为空进行判断

如果有新图片,循环判断$_FILES中的文件是否有被手动删除

如果没有被删除 下面执行的代码功能:

定义数组$images $thunb_images $water_images 用来存放原图 缩略图 水印图

判断文件的格式 判断文件的大小

将图片从临时路径中转移到永久路径中

将图片新的路径保存到$images数组中

调用缩略图函数,然后将缩略图的路径存放在$thunb_images数组中

调用水印图函数,然后将水印图的路径存放在$water_images数组中

//处理修改中产品对应原图片的步骤

判断$_POST["ready_check_images"] 是否为空

条件: 不为空, 代表有原图则判断原图中是否有图片被删除

如果原图被删除,

从文件夹中删除原图 删除对应的水印图 删除对应的缩略图

如果原图没有被删除,

则将原图对应的路径存储在$images数组中

将缩略图对应的路径存储在$thumb_images数组中

将水印图对应的路径存储在$water_images数组中

为空,判断原图存在,代表将原图所有的图片全部删除

从文件夹中删除原图 删除对应的水印图 删除对应的缩略图

c:上述流程执行完之后,

将$images,数组转化为json格式的字符串 追加到$_POST["images"]中

将$thumb_images,数组转化为json格式的字符串 追加到$_POST["thumb_images"]中

将$water_images,数组转化为json格式的字符串 追加到$_POST["water_images"]中

d:新增,新增成功跳转,新增失败,提示错误信息

【PHP项目】产品新增的多图上传的更多相关文章

  1. 项目总结21:项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库)

    项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...

  2. php产品细节图多图上传示例代码 无刷新

    前台文件代码 upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. yii2组件之多图上传插件FileInput的详细使用

    作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  4. JS案例之4——Ajax多图上传

    近期项目中有好几次用到多图上传,第一次在项目中真正用到Ajax技术,稍微整理了下,贴个案例出来. 我们传统的做法是当用户提交一个表单时,就向web服务器端发送一个请求.服务器接受并处理传来的表单信息, ...

  5. thinkphp5多图上传 js部分

    在项目中常会用到多图上上传,那就需要多图上传后需要预览,并且能删掉传错(不想传)的图,然而 测试了半天 并不知道jq怎么写,parent()parents()用了半天无果,罢了,还是用原生js来写.这 ...

  6. Vue的移动端多图上传插件vue-easy-uploader

    原文地址 前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发.在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目.就打算自己折腾一下,写一个Vue的上传插件,一劳 ...

  7. Bootstrap FileInput 多图上传插件 文档属性说明

    Bootstrap FileInput 多图上传插件   原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source ...

  8. iOS 使用AFN 进行单图和多图上传 摄像头/相册获取图片,压缩图片

    图片上传时必要将图片进行压缩,不然会上传失败 首先是同系统相册选择图片和视频.iOS系统自带有UIImagePickerController,可以选择或拍摄图片视频,但是最大的问题是只支持单选,由于项 ...

  9. TP5.0中多图上传文件名重复问题

    最近在做项目的时候出现了一个问题,这里记录一下: 问题: 使用TP5.0框架自带的文件上传方法后,发现多图上传可能会出现文件名重复的问题. 问题代码: 找到TP5框架上传文件命名方法,/thinkph ...

随机推荐

  1. SharePoint - Templates & Definitions

    1. <ListTemplate>元素的SecurityBits属性 Optional Text. Defines the item-level permissions in the li ...

  2. mongodb 3.4 学习 (二)命令

    # 使用或切换数据库 use <database name> # 显示所有数据库 show dbs # 显示所有collection show collections # 显示所有user ...

  3. 【SQL Server 2012】按倒序存储“分组统计”结果的临时表到新建表

    程序预先说明: 本文访问的数据库是基于存有RDF三元组的开源数据库Localyago修改的库,其中只有一个表,表中有五个属性:主语subject.谓语predict.宾语object.主语的编号sub ...

  4. March 23 2017 Week 12 Thursday

    A bird is known by its note, and a man by his talk. 闻其声而知鸟,听其言而知人. One of the lessons I learned rece ...

  5. March 15 2017 Week 11 Wednesday

    The starting point of all achievements is desire. 成功的第一步是渴望. Only you desire for somethings, you can ...

  6. linux服务基础之CentOS6编译安装mariadb

    1. 下载mariadb https://downloads.mariadb.org/mariadb/+releases/ 2. 解压到指定目录 # tar xf mariadb--linux-x86 ...

  7. 给自己的网站加上robots.txt

    今天给自己的网站加了一个robots.txt,在网上收集整理了一些资料,给自己网站也加上了robots.txt ! 顺便给大家分享一下! 一.robots.txt是什么? robots.txt是一个纯 ...

  8. NW.js开发环境的搭建

    写在前面: 之前一直在找关于在mac怎么搭建nw.js的开发环境,苦于自己也没有很深入的理解,其实看看官方文档就差不多知道mac下要怎么整了. 官方文档的图: 正题开始: 先去下载一个nw.js的安装 ...

  9. Ajax实现异步操作实例_针对JSON格式的请求数据

    最近写了一篇ajax异步操作XML格式的,今天就写关于json格式的. 一.简单了解Json 1. JSON有两种表示结构,对象和数组. 1.1 对象: { key1:value1, key2:val ...

  10. Android学习笔记_32_通过WebView实现JS代码与Java代码互相通信

    webview两种实现方法,覆盖onKeyDown()方法 缓存 WebSettings应用注意的几个问题 1.要实现JS代码与Java代码互相通信,需要通过Android的WebView控件,在视图 ...