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

最新推荐文章于 2023-03-23 10:25:19 发布

原创最新推荐文章于 2023-03-23 10:25:19 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片

图片预览专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript的图片上传功能，并实现了图片的实时预览效果。此外，还介绍了如何限制用户上传图片的数量，并展示了如何通过前端代码进行图片的管理和删除操作。

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>