struts2 图片上传至服务器页面预览及页面及时图片预览功能实现方式

最新推荐文章于 2021-08-12 08:30:28 发布

原创

最新推荐文章于 2021-08-12 08:30:28 发布 · 5.3k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了如何在Struts2框架下实现图片上传至服务器并进行页面预览的功能。主要涉及jsp页面设计、表单提交设置、后台处理以及前端图片显示的JavaScript代码。通过示例代码展示了图片选择、上传、预览和数据库存储的过程，适用于后台开发者参考。

其实此类的帖子网上已经很多了,但为什么还要再发一帖呢,原因很简单,就是为了让自已映像更深,本人主要是做后台开发的,所以写不出多漂亮及多简洁的css样式,但实现功能是百分百没问题的,本人后台用的是struts2 springmvc mybatis 前台js Jq easyui jsp

页面效果

jsp代码

<span style="font-weight: normal;"><table id="dataGridOne" title="查询结果"></table>
	
	<div id="dataWinOne">   
    	<form id="dataForm" method="post" enctype="multipart/form-data">
    		<table>
		    <tr>
		    	<td>
		    		<label for="d_daiName">犬只名称:</label>																											
					<input class="easyui-validatebox dataFormInput" id="d_daiName" name="data.daiName" data-options="validType:'maxlength[100]'"/>
                    <label for="d_daiNickname">犬只昵称:</label>
                    <input class="easyui-validatebox dataFormInput" id="d_daiNickname" name="data.daiNickname" data-options="validType:'maxlength[32]'"/>
		    	</td>
		    </tr>
		   <tr>
		    	<td>
                    <label for="d_sdiId"><span style="color: red;">* </span>犬种名称:</label>
                    <input class="easyui-combobox dataFormInput" id="d_sdiId" name="data.sdiId" 
                    	data-options="valueField:'id',textField:'text',required:'true',editable:'false',lines:'true',panelHeight:'auto',panelMaxHeight:'180px'"/>  
                    <label for="d_daiColor"><span style="color: red;">* </span>犬毛色:</label>
                    <input class="easyui-validatebox dataFormInput" id="d_daiColor" name="data.daiColor" data-options="required:'true',validType:'maxlength[50]'"/>
		    	</td>
		    </tr>
		    <tr>
		    	<td>
                    <label for="d_daiHeight"><span style="color: red;">* </span>犬身高:</label>
                    <input class="easyui-validatebox dataFormInput" id="d_daiHeight" name="data.daiHeight" data-options="required:'true',validType:'number'"/>  
                    <label for="d_daiWeight"><span style="color: red;">* </span>犬体重:</label>
                    <input class="easyui-validatebox dataFormInput" id="d_daiWeight" name="data.daiWeight" data-options="required:'true',validType:'number'"/>
		    	</td>
		    </tr>
		    <tr>
		    	<td>
                    <label for="d_daiLength"><span style="color: red;">* </span>犬体长:</label>
                    <input class="easyui-validatebox dataFormInput" id="d_daiLength" name="data.daiLength" data-options="required:'true',validType:'number'"/>  
                    <label for="d_sdsId"><span style="color: red;">* </span>犬性别:</label>
                    <input class="easyui-combobox dataFormInput" id="d_sdsId" name="data.sdsId" 
                    	data-options="valueField:'id',textField:'text',required:'true',editable:'false',lines:'true',panelHeight:'auto',panelMaxHeight:'180px'"/>
		    	</td>
		    </tr>
		    <tr>
		    	<td>
                    <label for="d_daiBirthday">犬出生日期:</label>
                    <input class="easyui-datebox dataFormInput" id="d_daiBirthday" name="data.daiBirthday" data-options="validType:'checkTime'"/>  
                    <label for="d_daiIssterilization"><span style="color: red;">* </span>犬是否绝育:</label>
                    <input class="easyui-combobox dataFormInput" id="d_daiIssterilization" name="data.daiIssterilization" 
                    	data-options="valueField:'id',textField:'text',required:'true',editable:'false',lines:'true',panelHeight:'auto',panelMaxHeight:'180px'"/>
		    	</td>
		    </tr>
		    <tr>
		    	<td>
                    <label for="d_sduId">犬只用途:</label>
                    <input class="easyui-combobox dataFormInput" id="d_sduId" name="data.sduId" 
                    	data-options="valueField:'id',textField:'text',editable:'false',lines:'true',panelHeight:'auto',panelMaxHeight:'180px'"/>  
                    <label for="d_daiImmunitysn">犬免疫证号:</label>
                    <input class="easyui-validatebox dataFormInput" id="d_daiImmunitysn" name="data.daiImmunitysn" data-options="validType:'maxlength[50]'"/>
		    	</td>
		    </tr>
		    <tr>
		    	<td>
                    <label for="d_adiDate"><span style="color: red;">* </span>收容日期:</label>
                    <input class="easyui-datebox dataFormInput" id="d_adiDate" name="data.adiDate" data-options="validType:'checkTime',required:'true'"/>
                    <label for="d_sarType"><span style="color: red;"&