PHP仿微信多图片预览上传实例代码


Posted in PHP onSeptember 13, 2016

生产图片区域,上传按钮#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() 
  }) 
 } 
}

本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/830.html

PHP 相关文章推荐
多文件上传的例子
Oct 09 PHP
joomla jce editor 解决上传中文名文件失败问题
Jun 09 PHP
PHP获取当前页面完整URL的实现代码
Jun 10 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
Aug 07 PHP
使用PHP备份MYSQL数据的多种方法
Jan 15 PHP
php画图实例
Nov 05 PHP
php实现通用的从数据库表读取数据到数组的函数实例
Mar 21 PHP
Yii中表单用法实例详解
Jan 05 PHP
php 常用的系统函数
Feb 07 PHP
php进行md5加密简单实例方法
Sep 19 PHP
PHP文件操作简单介绍及函数汇总
Dec 11 PHP
PHP7 标准库修改
Mar 09 PHP
微信支付PHP SDK ―― 公众号支付代码详解
Sep 13 #PHP
PHP基于单例模式编写PDO类的方法
Sep 13 #PHP
利用PHP将图片转换成base64编码的实现方法
Sep 13 #PHP
PHP将URL转换成短网址的算法分享
Sep 13 #PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
Sep 13 #PHP
php微信公众平台开发之微信群发信息
Sep 13 #PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
Sep 11 #PHP
You might like
php中将网址转换为超链接的函数
2011/09/02 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
React简单介绍
2017/05/24 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Python 的 with 语句详解
2014/06/13 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python OS模块实例详解
2019/04/15 Python
python批量爬取下载抖音视频
2019/06/17 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
优秀村官事迹材料
2014/01/10 职场文书
代理商会议邀请函
2014/01/27 职场文书
消防安全责任书
2014/04/14 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
运动会观后感
2015/06/09 职场文书
母亲节感言
2015/08/03 职场文书
Java spring定时任务详解
2021/10/05 Java/Android