Chinaunix首页 | 论坛 | 博客
  • 博客访问: 277554
  • 博文数量: 7
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 47
  • 用 户 组: 普通用户
  • 注册时间: 2018-10-22 11:03
文章分类
文章存档

2019年(4)

2018年(3)

我的朋友

分类: PHP

2018-10-23 17:50:37

PHP实现多张图片上传预览功能实例,支持左右切换位置、删除图片、图片数量限制,通过点击获取图片按钮可以获取上传图片的封面和所有图片等实用功能

向左移动图片
  1. function reverse_left(obj) { var obj_li = obj.parents("li"); var obj_prev = obj_li.prev("li"); if (obj_prev.hasClass("li_upload")) {
  2.         obj_li.insertBefore(obj_prev);
  3.         obj_li.find(".uploading-tip").css({"height": 0});
  4.     }
  5. }

向右移动图片

点击(此处)折叠或打开

  1. function reverse_right(obj) { var obj_li = obj.parents("li"); var obj_next = obj_li.next("li"); if (obj_next.hasClass("li_upload")) {
  2.             obj_li.insertAfter(obj_next);
  3.             obj_li.find(".uploading-tip").css({"height": 0});
  4.         }
  5.     }
Ajax删除图片 
  1. function delPic(pic, file_id) { //删除图片 参数1图片路径 参数2 随机数 $.post("del.php", {pic: pic}, function(data) {
  2.         $("#" + file_id).remove();
  3.         showUploadBtn();
  4.     })
  5. }

获取第一张图片(封面)和所有上传的图片

点击(此处)折叠或打开

  1. function getPics() {
  2.     var pics = "";
  3.     $("#ul_pics").find(".img_common").each(function() {
  4.         pics += $(this).attr("src") + ",";
  5.     })
  6.     var logo = "";
  7.     if ($("#ul_pics").find(".img_common").length > 0) {
  8.         logo = $("#ul_pics").find(".img_common").eq(0).attr("src");
  9.     }
  10.     alert("第一张图片:" + logo + "\n\所有图片:" + pics)
  11. }
本文转自: 转载请注明出处,谢谢!
阅读(1956) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~