经验大分享:ssm异步上传图片

简介: 经验大分享:ssm异步上传图片

1.首先引入jersey jar包

2.在配置文件中,配置允许上传图片

3.修改增加商品页面

<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>

<%@ include file="/back_page/head.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

[/span>html xmlns=""

[/span>head

[/span>title

[/span>script type="text/javascript"

function uploadPic() {

var options={

url:"/cn/upload/uploadPic.do", 访问保存图片的controller层的方法

dataType:"json",

type:"post",

success:function(data){

//回调2个路径

//url 绝对路径,用于在页面上显示图片

//path 相对路径,保存在数据库中

$("#allImgUrl").attr("src",data.url); 显示图片

$("#path").val(data.path)

}

}

$("#jvForm").ajaxSubmit(options);

}

[/span>body

[/span>div class="box-positon"

[/span>div class="rpos"

[/span>form class="ropt"

[/span>input type="submit" onclick="this.form.action='v_list.shtml';" value="返回列表" class="return-button"/>

[/span>div class="clear"

[/span>div class="body-box" style="float:right"

[/span>form id="jvForm" action="/cn/brand/add.do" method="post" enctype="multipart/form-data"

[/span>table cellspacing="1" cellpadding="2" Width</span>="100%" border="0" class="pn-ftable"

[/span>tbody

[/span>tr

[/span>td Width</span>="20%" class="pn-flabel pn-flabel-h"

[/span>span class="pn-frequired"<span style="color: rgba(0, 0, 255, 1)"]

品//代码效果参考:http://www.zidongmutanji.com/zsjx/594691.html

牌名称:="80%" class="pn-fcontent"

[/span>input type="text" class="required" name="name" maxlength="100"/>

[/span>tr

[/span>td Width</span>="20%" class="pn-flabel pn-flabel-h"

[/span>span class="pn-frequired"

上传商品图片(90x150尺寸):

[/span>td Width</span>="80%" class="pn-fcontent"

注:该尺寸图片必须为90x150。

[/span>tr

[/span>td Width</span>="20%" class="pn-flabel pn-flabel-h"

[/span>td Width</span>="80%" class="pn-fcontent"

[/span>img Width</span>="100" Height</span>="100"//代码效果参考:http://www.zidongmutanji.com/bxxx/431172.html

id="allImgUrl"/>

[/span>input type="hidden" name="imgUrl" id="path"/> 保存到数据库中,贮存在对象里

[/span>input type="file" onchange="uploadPic()" name="pic"/> 鼠标点击选中发生的事件,就是已经保存图片了

[/span>tr

[/span>td Width</span>="20%" class="pn-flabel pn-flabel-h"

品牌描述:="80%" class="pn-fcontent"

[/span>input type="text" class="required" name="description" maxlength="80" size="60"/>

[/span>tr

[/span>td Width</span>="20%" class="pn-flabel pn-flabel-h"

排序:="80%" class="pn-fcontent"

[/span>input type="text" class="required" name="sort" maxlength="80"/>

[/span>tr

[/span>td Width</span>="20%" class="pn-flabel pn-flabel-h"

是否可用:="80%" class="pn-fcontent"

[/span>input type="radio" name="isDisplay" value="1" checked="checked"/>可用

[/span>input type="radio" name="isDisplay" value="0"/>不可用

[/span>tbody

[/span>tr

[/span>td class="pn-fbutton" colspan="2"

[/span>input type="submit" class="submit" value="提交"/> [/span>input type="reset" class="reset" value="重置"/>

4.controller层方法

?1234567891011121314151617181920212223242526272829303132333435363738394041<div class="l

相关文章
|
16天前
|
JSON JavaScript 前端开发
技术笔记:ssm异步上传图片
技术笔记:ssm异步上传图片
11 0
|
Java 专有云
使用的ssm框架 Java 上传图片到专有云OSS
使用的ssm框架 通过阿里云官网提供的Java sdk 做上传图片到专有云OSS 实现项目。
2079 0
|
Web App开发 前端开发 Java
ssm框架整合+Ajax异步验证
SSM框架是目前企业比较常用的框架之一,它的灵活性、安全性相对于SSH有一定的优势。说到这,谈谈SSM和SSH的不同点,这也是企业常考初级程序员的面试题之一。说到这两套框架的不同,主要是持久层框架Hibernate和MyBatis的不同和控制层框架SpringMVC和Struts2的不同。
1345 0
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的大学生校园兼职附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的大学生校园兼职附带文章和源代码部署视频讲解等
46 8
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的停车场微信小程序附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的停车场微信小程序附带文章和源代码部署视频讲解等
30 6
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的使命召唤游戏助手附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的使命召唤游戏助手附带文章和源代码部署视频讲解等
30 5
基于ssm+vue.js+uniapp小程序的使命召唤游戏助手附带文章和源代码部署视频讲解等
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
29 4
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的跑腿平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的跑腿平台附带文章和源代码部署视频讲解等
36 10
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的疫情期间学生请假与销假系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的疫情期间学生请假与销假系统附带文章和源代码部署视频讲解等
58 7
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的英语学习交流平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的英语学习交流平台附带文章和源代码部署视频讲解等
28 7