产品新增:多图上传

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. CSS3嵌入字体

    @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体.语法: 例子:

  2. matlab练习程序(Ritter‘s最小包围圆)

    原始算法是sphere,我这里简化为circle了. Ritter's求最小包围圆为线性算法,因为非常简单,所以应用非常广泛. 该算法求出的圆比最优圆大概会大个5%到20%左右,求最优圆应该可以用Bo ...

  3. win7下tomcat5.5无法通过ip和127.0.0.1访问的解决方法

    解决办法:找到tomcat5.5目录下的conf\server.xml文件,原文如下: <Connector port="8080" maxHttpHeaderSize=&q ...

  4. ng-repeat和ng-options区别

    ng-repeat ="x in XXX" ng-options="x.*** for x in XXX“ ng-repeat 写法 <select> < ...

  5. VC6.0静态编译注意事项

    选择静态编译(工程->常规->Microsoft基础类->使用MFC作为静态链接库)的时候,会报错:MSVCRTD.lib(MSVCRTD.dll) : error LNK2005: ...

  6. Azure镜像市场再下一城,中标软件入驻开启Azure国产操作系统时代

    近日,中标软件成功入驻 Azure 镜像市场,提供中标麒麟 Linux 的产品镜像服务,这样一来,中标麒麟也成为国内唯一能够在 Azure 公有云上运行的国产操作系统产品. 作为国内操作系统的领头羊, ...

  7. solidity语言6

    映射 可以认为是哈希,格式 mapping(_KeyType => _ValueType) pragma solidity ^0.4.0; contract MappingExample { m ...

  8. Selenium2学习(七)-- 定位一组元素find_elements

    前言 前面的几篇都是讲如何定位一个元素,有时候一个页面上有多个对象需要操作,如果一个个去定位的话,比较繁琐,这时候就可以定位一组对象. webdriver 提供了定位一组元素的方法,跟前面八种定位方式 ...

  9. 确定浏览器是否支持某些DOM模块

    var supportDOM2Core = document.implementation.hasFeature("Core","2.0"); var supp ...

  10. W5100与MCU的连接方式

    W5100与MCU的连接方式 W5100与MCU的连接方式主要有直接总线连接.间接总线连接.SPI总线连接这三种连接方法,不同的连接方法适应于不同的场合,应该按需选择最恰当的连接方式. 1)直接总线连 ...