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

简介: PHP仿微信多图片预览下载演示地址:http://www.erdangjiade.com/js/830生产图片区域,上传按钮#btn可替换自己想要的图片 plupload上传var uploader = new plupload.
PHP仿微信多图片预览下载演示地址: http://www.erdangjiade.com/js/830
生产图片区域,上传按钮#btn可替换自己想要的图片

<ul id="ul_pics" class="ul_pics clearfix"> 
    <li><img src="logo.png" id="btn" class="img_common" /></li> 
</ul>



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 += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>"; 
                }); 
                $("#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("<input type='hidden'name='pic[]' value='" + data.pic + "'/><input type='hidden'name='pic_name[]' value='" + data.name + "'/><img class='img_common' onclick=delPic('" + data.pic + "','" + file.id + "') src='" + data.pic + "'/>");//追加图片 
        }, 
        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() 
        }) 
    } 
}


相关文章
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
83 6
|
28天前
|
JavaScript PHP UED
16 PHP实现图书删除功能
路老师在知乎上分享了PHP语言的知识,帮助大家入门和深入了解PHP。本文介绍了如何实现图书删除功能,通过点击删除按钮触发`deleteBook.php`文件,完成删除操作并返回列表页。同时,还新增了一个“新增”按钮,优化了用户体验。
26 2
16 PHP实现图书删除功能
|
28天前
|
JavaScript PHP
17 PHP 实现批量删除功能
路老师在本文中继续优化图书删除功能,实现批量删除图书。通过添加删除按钮、表格前的复选框以及实现PHP后端逻辑,展示了完整的删除流程和效果。
33 8
|
28天前
|
数据库连接 PHP
15 PHP实现图书修改功能
路老师分享了如何使用PHP实现图书信息的修改功能。首先,在列表页面点击编辑按钮,跳转至`editBook.php`,通过ID获取图书信息并展示在`edit.html`页面。用户提交修改后,`updateBook.php`处理更新请求,成功后返回到图书列表页。纯干货,技术知识满满。
27 2
|
28天前
|
PHP
14 PHP实现图书添加功能
路老师分享PHP语言知识,帮助大家入门并深入了解PHP。本文介绍如何实现图书添加功能,包括创建HTML表单和PHP后端处理逻辑,最后展示实际效果。
25 2
|
2月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
101 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
3月前
|
设计模式 算法 PHP
PHP中的设计模式:策略模式的深入探索与实践在软件开发的广袤天地中,PHP以其独特的魅力和强大的功能,成为无数开发者手中的得力工具。而在这条充满挑战与机遇的征途上,设计模式犹如一盏明灯,指引着我们穿越代码的迷雾,编写出更加高效、灵活且易于维护的程序。今天,就让我们聚焦于设计模式中的璀璨明珠——策略模式,深入探讨其在PHP中的实现方法及其实际应用价值。
策略模式,这一设计模式的核心在于它为软件设计带来了一种全新的视角和方法。它允许我们在运行时根据不同情况选择最适合的解决方案,从而极大地提高了程序的灵活性和可扩展性。在PHP这门广泛应用的编程语言中,策略模式同样大放异彩,为开发者们提供了丰富的创作空间。本文将从策略模式的基本概念入手,逐步深入到PHP中的实现细节,并通过一个具体的实例来展示其在实际项目中的应用效果。我们还将探讨策略模式的优势以及在实际应用中可能遇到的挑战和解决方案,为PHP开发者提供一份宝贵的参考。
|
3月前
|
算法 JavaScript 前端开发
切西瓜法实现微信抢红包功能
该文章介绍了使用“切西瓜法”和“栅栏法”两种算法来模拟微信抢红包的随机分配机制,并通过具体的JavaScript代码实现了红包金额的公平随机分配过程。
切西瓜法实现微信抢红包功能
|
2月前
|
云安全 存储 小程序
PHP微信小程序解决方案PhpMall
PHP微信小程序解决方案PhpMall
42 0
|
3月前
|
人工智能 前端开发 JavaScript
MacTalk 测评通义灵码,实现“微信表情”小功能
墨问西东创始人池建强分享了团队使用通义灵码的经验。