图片预览，图片显示以及图片删除

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>

图片预览，图片显示以及图片删除相关推荐

uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...
html 手机qq图片预览,模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
若依前后端分离vue 中项目上线后图片预览无法显示问题
这里看到图片返回的url地址里面图片前缀名多了个 /prod - api 导致图片无法预览找到components 里面的imagetwo 里面的index.vue这里只需要在url上传图片组件 ...
ckfinder 图片预览有的显示有的不显示_Python学习之图片显示
利用OpenCV读取并显示一张图片 # This is a sample OpenCV script. 遇到的小坑: 1.报错: ImportError: No module named cv2 第一 ...
html5 点击图片预览放大,jQuery超实用图片放大预览特效插件
大自然的自述过去,我这儿有新鲜的空气,清澈的河流,雄伟的高山,一望无际的草原,郁郁葱葱的森林.天空中,小鸟在自由自在的飞翔:水里,小鱼在快活的游来游去:森林里,动物们快乐地嬉戏,人类辛勤的种植.一切 ...
[转]如何解决Windows图片预览窗口无法显示图片缩略图
问:我的电脑中安装的是Windows 2000,最近发现文件夹的图片预览功能不能使用了,也就是说图片预览窗口无法显示图片缩略图了,在该位置上只有文件的图标.请问这是 ...
win7计算机无法显示,最新版本：如果无法显示win7计算机的图片预览，该怎么办...
有时,当我们要浏览图片时,我们发现图片仅显示图标而不显示预览,因此,如果无法显示win7计算机的图片预览,该怎么办?让研究编辑告诉所有人解决问题.显示方法,希望它对大家有帮助. Win7计算机图片预览 ...
浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
vue移动端实现图片预览
接着上文的文件上传.下载.删除继续往下说,我们先说移动端的图片格式预览上文说到了vue引用了vant插件,是一个很好用的移动端开发组件,它自带了上传文件的方法,当然也带了图片预览的方法图片预览其实 ...
js实现移动端图片预览：手势缩放，手势拖动，双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言本文将介绍如何通过js实现移动端图片预览,包括图片的预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...

图片预览，图片显示以及图片删除

图片预览，图片显示以及图片删除相关推荐

最新文章

热门文章