web上传图片，图片放大效果（viewer）

最新推荐文章于 2024-07-09 10:24:41 发布

小coder

最新推荐文章于 2024-07-09 10:24:41 发布

阅读量890

点赞数

分类专栏： web 文章标签：图片上传

本文链接：https://blog.csdn.net/u012220753/article/details/87272497

版权

该博客介绍了如何在web上实现图片上传并提供放大缩小功能。通过HTML表单提交图片，限制上传格式，使用JS关键脚本来处理上传过程。图片上传后进行压缩，并在前端利用viewer.js库提供图片预览时的放大缩小功能，提升用户体验。

摘要由CSDN通过智能技术生成

1.web上传图片

HTML界面

html这一部分的完整代码都贴出来了。这里是利用form表单提交。
页面定义允许上传格式定义为： .png,.gif,.jpg,.bmp

 <form name="fileForm" id="fileForm"  th:action="@{/nt/attachment/uploadFile4High}" target="hiddenFrame" enctype="multipart/form-data" method="post">
                                    <table width="100%" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <input type="hidden" name="recordType" id="recordType"/>
                                            <input type="hidden" name="recordID" id="recordID"/>
                                            <td class="width-100" align="right">辅助检查结果<label style="color: red">*</label>：</td>
                                            <td colspan="4"  class="width-400 btnGroup">
                                                <label for="upfile" class="btnMin edit">选择图片</label>
                                                <input type="file" id="upfile" name="upfile" accept=" .png,.gif,.jpg,.bmp" />
                                                <!--<input id="upfile" name="upfile" type="file" required="required" accept=" .png,.gif,.jpg,.bmp" />-->
                                            </td>
                                            <td class="width-100" align="right" style="visibility: hidden;">
                                                <a class="easyui-linkbutton ml-10" href="javascript:void(0)" onclick="upload4Att()" iconCls="icon-search">上传</a>
                                            </td>
                                            <td class="width-50"></td>
                                        </tr>
                                        <tr>
                                            <td class="width-100" align="right">预览：</td>
                                            <td colspan="5"  style="height: 80px; " >
                                                <ul id="jqhtml">
                                                    <li style="cursor: zoom-in; ">