1***.添加图片*
$(document).ready(function () {
$("#picture").change(function () {
document.getElementById('dd').innerHTML = "";
var fil = this.files;
var file=document.getElementById('picture');
if(fil.length>3)
{
file.value="";
alert("最多上传3张图片!");
}
else
{
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
}
});
});
function reads(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function()
{
document.getElementById("dd").innerHTML += "<img style='width:80px' src='"+reader.result+"'>";
};
}
</script>
2.修改图片
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
body内
<input type="hidden" id="listsize" value="${fn:length(fileidList)}">
...
<tr>
<td>图片上传</td>
<td colspan="3">
<div class="tools" >
<ul class="toolbar">
<li class="click" onclick="">
<span class="icon_add"></span>
<input style="padding-top:6px" type="file" name="picture" id="picture" multiple="multiple" value="file" accept="image/*"/>
</li>
</ul>
<ul>
<li>
<span style="color:red;padding-top:10px">*</span>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td style="width:50px;height:34px;">图片预览</td>
<td><div id='dd'></div></td>
</tr>
<tr>
<td>已存图片</td>
<td colspan="3">
<c:forEach items="${fileidList}" var="projectpicture" varStatus="j">
<div style="float:left;">
<div style="width:90px;z-index:500;" onclick="del('${projectpicture.fileid}')" ><img src="../images/t03.png" style="width:20px;heigth:20px;position:relative;left:60px;top:18px;z-index:1000;"/></div>
<img src="<%=UrlUtil.getRemotePath(request) %>/fileserver/downloadAttachment.do?fileid=${projectpicture.fileid}"
onclick="showPicture('<%=UrlUtil.getRemotePath(request) %>/fileserver/downloadAttachment.do?fileid=${projectpicture.fileid}','${projectpicture.fileid}')"
style="width:80px; height:60px;">
</div>
</c:forEach>
</td>
</tr>
...
javascript
<script type="text/javascript">
$(document).ready(function () {
$("#picture").change(function () {
var fil = this.files;
var file=document.getElementById('picture');
var listsize=document.getElementById('listsize').value;
if((parseInt(listsize)+parseInt(fil.length))>3)
{
file.value="";
alert("最多上传3张图片!");
}
else
{
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
}
function reads(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function()
{
document.getElementById("dd").innerHTML += "<img style='height:60px;width:80px' src='"+reader.result+"'>";
};
}
});
});
function showPicture(picture,fileid){
var showPicture = "<img class='hidden' src='" + picture + "' style='width:500px;' >";
document.getElementById("showImg").innerHTML = showPicture;
$(".hidden").attr('onclick','hidediv()');
document.getElementById("showImg").style.display="";
}
function hidediv() {
document.getElementById("showImg").style.display="none";
}
function del(fileid) {
var itemformatid=document.getElementById("itemformatid").value;
if(confirm('您确认想要删除图片吗?'))
{
$.ajax({
type: "POST",
url: "deletePic.do",
data: "itemformatid="+itemformatid+"&fileid="+fileid,
success: function(data)
{
var obj = JSON.parse(data);
if(obj == "1")
{
alert('业态图片删除成功!');
location.reload();
return;
}
alert('图片删除失败!');
}
});
}
}
</script>