PHP预览多张图片,PHP仿微信多图片预览上传功能

2023-11-03 12:40

本文主要是介绍PHP预览多张图片,PHP仿微信多图片预览上传功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

PHP仿微信多图片预览下载演示地址:

http://www.erdangjiade.com/js/830

生产图片区域,上传按钮#btn可替换自己想要的图片

  • logo.png

plupload上传

var uploader = new plupload.Uploader({//创建实例的构造方法

runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序

browse_button: 'btn', // 上传按钮

url: "ajax.php", //远程上传地址

flash_swf_url: 'plupload/Moxie.swf', //flash文件地址

silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地址

filters: {

max_file_size: '10mb', //最大上传文件大小(格式100b, 10kb, 10mb, 1gb)

mime_types: [//允许文件上传类型

{title: "files", extensions: "jpg,png,gif,jpeg"}

]

},

multi_selection: true, //true:ctrl多文件上传, false 单文件上传

init: {

FilesAdded: function(up, files) { //文件上传前

if ($("#ul_pics").children("li").length > 30) {

alert("您上传的图片太多了!");

uploader.destroy();

} else {

var li = '';

plupload.each(files, function(file) { //遍历文件

li += "

0%
";

});

$("#ul_pics").prepend(li);

uploader.start();

}

},

UploadProgress: function(up, file) { //上传中,显示进度条

var percent = file.percent;

$("#" + file.id).find('.bar').css({"width": percent + "%"});

$("#" + file.id).find(".percent").text(percent + "%");

},

FileUploaded: function(up, file, info) { //文件上传成功的时候触发

var data = eval("(" + info.response + ")");//解析返回的json数据

$("#" + file.id).html("%22%20+%20data.pic%20+%20%22");//追加图片

},

Error: function(up, err) { //上传出错的时候触发

alert(err.message);

}

}

});

uploader.init();

ajax删除上传的图片

function delPic(pic, file_id) { //删除图片 参数1图片路径 参数2 随机数

if (confirm("确定要删除吗?")) {

$.post("del.php", {pic: pic}, function(data) {

$("#" + file_id).remove()

})

}

}

更多0

分享到:

这篇关于PHP预览多张图片,PHP仿微信多图片预览上传功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/338236

相关文章

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

PHP应用中处理限流和API节流的最佳实践

《PHP应用中处理限流和API节流的最佳实践》限流和API节流对于确保Web应用程序的可靠性、安全性和可扩展性至关重要,本文将详细介绍PHP应用中处理限流和API节流的最佳实践,下面就来和小编一起学习... 目录限流的重要性在 php 中实施限流的最佳实践使用集中式存储进行状态管理(如 Redis)采用滑动

SpringBoot实现不同接口指定上传文件大小的具体步骤

《SpringBoot实现不同接口指定上传文件大小的具体步骤》:本文主要介绍在SpringBoot中通过自定义注解、AOP拦截和配置文件实现不同接口上传文件大小限制的方法,强调需设置全局阈值远大于... 目录一  springboot实现不同接口指定文件大小1.1 思路说明1.2 工程启动说明二 具体实施2

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java:高效Word文档处理的利器代码实战:使用Java为Wo

Debian 13升级后网络转发等功能异常怎么办? 并非错误而是管理机制变更

《Debian13升级后网络转发等功能异常怎么办?并非错误而是管理机制变更》很多朋友反馈,更新到Debian13后网络转发等功能异常,这并非BUG而是Debian13Trixie调整... 日前 Debian 13 Trixie 发布后已经有众多网友升级到新版本,只不过升级后发现某些功能存在异常,例如网络转

基于C#实现PDF转图片的详细教程

《基于C#实现PDF转图片的详细教程》在数字化办公场景中,PDF文件的可视化处理需求日益增长,本文将围绕Spire.PDFfor.NET这一工具,详解如何通过C#将PDF转换为JPG、PNG等主流图片... 目录引言一、组件部署二、快速入门:PDF 转图片的核心 C# 代码三、分辨率设置 - 清晰度的决定因

Python从Word文档中提取图片并生成PPT的操作代码

《Python从Word文档中提取图片并生成PPT的操作代码》在日常办公场景中,我们经常需要从Word文档中提取图片,并将这些图片整理到PowerPoint幻灯片中,手动完成这一任务既耗时又容易出错,... 目录引言背景与需求解决方案概述代码解析代码核心逻辑说明总结引言在日常办公场景中,我们经常需要从 W

基于Java和FFmpeg实现视频压缩和剪辑功能

《基于Java和FFmpeg实现视频压缩和剪辑功能》在视频处理开发中,压缩和剪辑是常见的需求,本文将介绍如何使用Java结合FFmpeg实现视频压缩和剪辑功能,同时去除数据库操作,仅专注于视频处理,需... 目录引言1. 环境准备1.1 项目依赖1.2 安装 FFmpeg2. 视频压缩功能实现2.1 主要功

使用Python实现无损放大图片功能

《使用Python实现无损放大图片功能》本文介绍了如何使用Python的Pillow库进行无损图片放大,区分了JPEG和PNG格式在放大过程中的特点,并给出了示例代码,JPEG格式可能受压缩影响,需先... 目录一、什么是无损放大?二、实现方法步骤1:读取图片步骤2:无损放大图片步骤3:保存图片三、示php

深度解析Python yfinance的核心功能和高级用法

《深度解析Pythonyfinance的核心功能和高级用法》yfinance是一个功能强大且易于使用的Python库,用于从YahooFinance获取金融数据,本教程将深入探讨yfinance的核... 目录yfinance 深度解析教程 (python)1. 简介与安装1.1 什么是 yfinance?