一段简单的多图上传前端代码（前端批量上传）

某政府机关，有许多下属部门，电脑设备情况复杂，浏览器从IE6、IE7……以及chrome都有，为其设计的B/S系统经常出现兼容性问题，并且与外网不通，以至于许多优秀的插件不能使用。现摘录一段前端代码，主要功能是多图片上传以及预览。话不多说，直接上代码。

CSS

.imgPre{

width:100%;

height: 80px;

line-height: 80px;

border:1px dashed #999;

overflow: hidden;

cursor: pointer;

position:relative;

}

.overdiv{

position: absolute;

z-index: 1000;

top:0;

left:0;

width:100%;

height: 100%;

background:rgba(0,0,0,.5);

display: none;

color:#fff;

text-align: center;

}

.imgPre:hover .overdiv{

display: block;

}

.imgPre img{

width:100%;

height: 100%;

}

#picInput {

width:520px;

}

#picInput li{

float:left;

width: 92px;

padding: 5px;

}

#picInput li input {

position:absolute;

top:0;

left:0;

width: 100%;

height:100%;

opacity:0;

filter:alpha(opacity=0);

}

HTML

<ul id="picInput">

<li><div class="imgPre"><img src="png/uppic.jpg"><input type='file' name='npic[]' id='0' onchange='preImg2(this.id,this);'></div></li>

</ul>

js（引用了较早版本的jquery-1.8.3.min.js）:

function preImg2(sourceId,source) {

var url = getFileUrl(sourceId);

$("#"+source.id).siblings().attr('src',url);

$("#"+source.id).parent().append("<div class='overdiv'>删除</div>")

$("#"+source.id).remove();

var imgId = $('#picInput img').length;

var input = "<li><div class=\"imgPre\"><img src=\"png/uppic.jpg\"><input type='file' name='npic[]' id='"+imgId+"' onchange='preImg2(this.id,this);'></div></li>";

var picInut = $('#picInput');

if(imgId < 12){

picInut.append(input);

}

}

效果：

另外还有一个删除图片的功能，代码还没有写，有兴趣的朋友不妨完善一下。