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

本文介绍了如何在Struts2框架下实现图片上传至服务器并进行页面预览的功能。主要涉及jsp页面设计、表单提交设置、后台处理以及前端图片显示的JavaScript代码。通过示例代码展示了图片选择、上传、预览和数据库存储的过程,适用于后台开发者参考。
摘要由CSDN通过智能技术生成
其实此类的帖子网上已经很多了,但为什么还要再发一帖呢,原因很简单,就是为了让自已映像更深,本人主要是做后台开发的,所以写不出多漂亮及多简洁的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" 
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值