# A simple picture delete and add component similar to WeChat

**Repository Path**: van404/A-simple-picture-delete-and-add-component-similar-to-WeChat

## Basic Information

- **Project Name**: A simple picture delete and add component similar to WeChat
- **Description**: 简单的发朋友圈效果图片选择、删除组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-03-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#A simple picture delete and add component similar to WeChat
# 简单的发朋友圈效果图片选择、删除组件

---

##解决的问题
之前开发一个pop校友圈，在发送pop页面上需要上传图片，并且能像朋友圈一样上传好后可以编辑、删除，网上没有找到类似的，感觉能想到思路，就自己做了一个！
##效果图
![图片上的红叉][1]
##下载地址[下载地址](http://git.oschina.net/van404/A-simple-picture-delete-and-add-component-similar-to-WeChat)
##具体思路
1. 每次添加图片必须要更新视图，所以有函数`img_del_add(src)`，让每次有新图片添加的时候，都调用它，然后在位置上放上图片；

2. 图片添加后，在图片右上角加上一个红叉`X`，然后为红叉绑定点击事件，点击后，连同其依附的图片一并删除；

3. 删除后，由于位置有变化，图片要重新排列，所以用函数`img_del_reload()`重新排版；

4. 扩展了可以通过函数`img_del_listener_bind(user_func)`绑定自定义的删除函数`user_func`，不过在`img_del_deleted()`之后运行，运行的步骤是`img_del_deleted()=>user_func()`。

##使用方法
#####1. 引入img_del.js
#####2. 在JS脚本的init里面运行`img_del_init(config)`，config对象的配置如下
```
config={
    parent:node,
    index:int
}
```
#####3. 安装`img_del_add(url)`函数，比如在异步ajax函数中
```
$.post(url, {
    base64_image: encodeURIComponent(rst.base64)
}, function (data) {
        if (data.status == 1) {
            img_del_add(data.data);
        } else {
            //...
        }
}, 'json');
```
#####4.绑定删除函数(可选)
```
img_del_listener_bind(function(event){
    alert('删除成功！');
})
```
###使用实例：
```
var config={
    parent:$('img-box'),
    index:0
};
img_del_init(config);
img_del_listener_bind(function(event){
    alert('删除成功！');
})
$('#test_btn').on('click',function(){
    var src='http://pic.phpplugin.com/demos/assets/timg.jpg';
    img_del_add(src);
});
```


  [1]: http://pic.phpplugin.com/demos/assets/img_del_demo_pic1.jpg