ajax异步多图上传插件,js异步上传多张图片插件的使用方法

本文为大家分享了js异步上传多张图片插件的使用方法，供大家参考，具体内容如下

效果展示：

功能描述：

1.实现图片预览，预览图片移除，任意张数异步上传，上传进度条指示，已选中且上传的图片不会重复上传，且不能移除

使用方法：

界面顶部引入IMGUP.css，2.0版本以下的Jquery，页面底部引入IMGUP.js

界面中必须存在三个元素

1、图片选择： id必须是“div_imgfile”，可以是任意元素，onclick事件触发选择对话框

2、图片预览容器：id必须是“div_imglook”的div，里面包含一个清除浮动的div

3、确定上传按钮：id必须是“btn_ImgUpStart”，可以是任意元素，onclick事件开始上传全部选中图片

样式可随意更改，js文件顶部有三个变量，可以分别设置单张图片大小限制，单位MB，最多选中图片张数，异步提交服务端位置

ajax中回调函数可以修改提示信息样式，查找“alert”也可。

选择图片

/*选择图片框样式*/

#div_imgfile {

width: 130px;

height: 130px;

text-align: center;

line-height: 130px;

font-family: 微软雅黑;

font-size: 16px;

box-sizing: border-box;

border: 2px solid #808080;

cursor: pointer;

}

/*选择图片框鼠标移入移出效果*/

#div_imgfile:hover {

background-color: #d1cfcf;

}

.imgfile {

display: none;

}

/*这里是图片预览容器样式*/

#div_imglook {

margin-top: 20px;

background-color: #FFEFD5;

}

/*单个图片预览模块样式*/

.lookimg {

width: 130px;

height: 130px;

box-sizing: border-box;

border: 1px solid #808080;

float: left;

margin-right: 10px;

position: relative;

}

.lookimg img {

width: 100%;

height: 100%;

}

/*删除按钮样式*/

.lookimg_delBtn {

position: absolute;

bottom: 0px;

left: 0px;

width: 100%;

height: 30px;<