文件上传.-USB迷|专注于互联网分享

文件上传.

接着这期内容：根据struts的增删改查

课程目标：

图片上传以及页面展示

一、文件上传的三种方式

1、上传到tomcat服务器

自己的电脑：项目在哪里，图片就在哪里

云服务器：是没有CDEF盘的，只有/跟目录

2、上传到指定文件目录，添加服务器与真实目录的映射关系，从而解耦上传文件与tomcat的关系
文件服务器和web服务器通常是同一个，但是文件目录与tomcat目录肯定不是同一个

3、在数据库表中建立二进制字段，将图片存储到数据库

安全性比第二种高

推荐使用的ECS云服务器：阿里云、腾讯云、西部数码云，至少要1核CPU，2G内存的

二、文件上传演示

1、上传文件的界面

必须是多功能表单（enctype="multipart/form-data" type="file"）

<%@ page language='java' contentType='text/html; charset=UTF-8'
   pageEncoding='UTF-8'%>
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' '.dtd'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>图片上传</title>
</head>
<body>
   <form class="form-inline"
       action="${pageContext.request.contextPath }/sy/clz_upload.action" method="post" enctype="multipart/form-data">
       <input type="hidden" name="cid" value="${result.cid }"><br>
       <input type="hidden" name="cname" value="${resultame }"><br>
       <input type="hidden" name="cteacher" value="${result.cteacher}"><br>
       <input type="file" name="img">
       <input type="submit">
   </form>

</body>
</html>

2、struts必须按照指定的格式去接受参数变量

指定的格式：

①上传的文件

②、上传的文件名

③、上传的文件类别

private File img;
   private String imgFileName;
   private String imgContentType;
   public File getImg() {
       return img;
   }

   public void setImg(File img) {
       this.img = img;
   }

   public String getImgFileName() {
       return imgFileName;
   }

   public void setImgFileName(String imgFileName) {
       this.imgFileName = imgFileName;
   }

   public String getImgContentType() {
       return imgContentType;
   }

   public void setImgContentType(String imgContentType) {
       this.imgContentType = imgContentType;
   }

3、web层，写方法

跳转的方法--》upload.jsp

上传的方法：

将指定的文件图片上传到文件目录

将访问图片的请求映射地址更新到数据

//   跳转到文件上传界面
   public String preUpload() throws Exception {
       this.result=this.clzDao.list(clz, null).get(0);
       this.req.setAttribute("result", result);
       return "upload";
   }

   public String upload() throws Exception {
//       img代表客户选择的文件或者图片，再将图片上传到其他地方
//       img代表源头，要将其写入目的地target
       String destDir="E:/Temp/mvc/upload";
       String serverDiv="/uploadImages";
//       E:/Temp/mvc/upload/1.png
//       http://localhost:8080/struts/upload/xx.png
       FileUtils.copyFile(img,new File(destDir+"/"+imgFileName));
//       数据库保存的值是/uploadImages/xx.png
//       图片是在E:/Temp/mvc/upload/1.png
//       访问：http://localhost:8080/struts/uploadImages/xx.png
       clz.setPic(serverDiv+"/"+imgFileName);
       this.clzDao.edit(clz);
       return TOLIST;
   }

4、在tomcat中的server.xml中配置

注意放置的顺序

<?xml version="1.0" encoding="UTF-8"?>
<Server port="8005" shutdown="SHUTDOWN">
<Listener className="org.apache.catalina.startup.VersionLoggerListener"/>


<Listener SSLEngine="on" className="org.apache.catalina.core.AprLifecycleListener"/>

<Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener"/>
<Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener"/>
<Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener"/>


<GlobalNamingResources>

<Resource auth="Container" description="User database that can be updated and saved" factory="org.apache.catalina.users.MemoryUserDatabaseFactory" name="UserDatabase" pathname="conf/tomcat-users.xml" type="org.apache.catalina.UserDatabase"/>
</GlobalNamingResources>


<Service name="Catalina">





<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>






<Connector port="8009" protocol="AJP/1.3" redirectPort="8443"/>




<Engine defaultHost="localhost" name="Catalina">





<Realm className="org.apache.catalina.realm.LockOutRealm">

<Realm className="org.apache.catalina.realm.UserDatabaseRealm" resourceName="UserDatabase"/>
</Realm>

<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true">





<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" pattern="%h %l %u %t "%r" %s %b" prefix="localhost_access_log" suffix=".txt"/>


<Context docBase="E:/Temp/mvc/upload" path="/uploadImages"/>
<Context docBase="lv_struts" path="/lv_struts" reloadable="true" source="org.eclipse.jst.jee.server:lv_struts"/></Host>

</Engine>
</Service>
</Server>

5、配置struts-sy.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
   "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
   ".5.dtd">
<struts>
   <package name="sy" extends="base" namespace="/sy">
   <action name="/clz_*" class="com.lv.web.ClzAction" method="{1}" >
   <result name="list">/clzList.jsp</result>
   <result name="toEdit">/clzEdit.jsp</result>
   <result name="toList" type="redirectAction">/clz_list</result>
   <result name="upload">/upload.jsp</result>
   </action>
   </package>
</struts>

6、显示上传的图片(clzList.jsp）

直接访问img映射地址，通过img标签

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib uri="" prefix="z"%>
<%@ taglib uri="" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
   href=".5.0/css/bootstrap.css"
   rel="stylesheet">
<script
   src=".5.0/js/bootstrap.js"></script>
<title>博客列表</title>
<style type="text/css">
.page-item input {
   padding: 0;
   width: 40px;
   height: 100%;
   text-align: center;
   margin: 0 6px;
}

.page-item input, .page-item b {
   line-height: 38px;
   float: left;
   font-weight: 400;
}

.page-item.go-input {
   margin: 0 10px;
}
</style>
</head>
<body>
   <form class="form-inline"
       action="${pageContext.request.contextPath }/sy/clz_list.action" method="post">
       <div class="form-group mb-2">
           <input type="text" class="form-control-plaintext" name="title"
               placeholder="请输入书籍名称">



       </div>
       <button type="submit" class="btn btn-primary mb-2">查询</button>
       <a class="btn btn-primary mb-2" href="${pageContext.request.contextPath }/sy/clz_toEdit.action">新增</a>
   </form>

   <table class="table table-striped bg-success">
       <thead>
           <tr>
               <th scope="col">ID</th>
               <th scope="col">名字</th>
               <th scope="col">老师</th>
               <th scope="col">操作</th>
           </tr>
       </thead>
       <tbody>
           <c:forEach var="b" items="${result }">
           <tr>
               <td>${b.cid }</td>
               <td>${bame}</td>
               <td>${b.cteacher }</td>
               <td>
                   <img alt="" src="${b.pic }" style="width: 50px;height: 70px;">
               </td>
               <td>
<a href="${pageContext.request.contextPath }/sy/clz_toEdit.action?cid=${b.cid}">修改</a>
<a href="${pageContext.request.contextPath }/sy/clz_del.action?cid=${b.cid}">删除</a>
<a href="${pageContext.request.contextPath }/sy/clz_preUpload.action? cid=${b.cid}">上传图片</a>
               </td>
           </tr>
           </c:forEach>
       </tbody>
   </table>
   
   <z:page pageBean="${pageBean }"></z:page>

</body>
</html>

效果：

本期内容结束~

文件上传.

接着这期内容：根据struts的增删改查

课程目标：

图片上传以及页面展示

一、文件上传的三种方式

1、上传到tomcat服务器

自己的电脑：项目在哪里，图片就在哪里

云服务器：是没有CDEF盘的，只有/跟目录

3、在数据库表中建立二进制字段，将图片存储到数据库

安全性比第二种高

推荐使用的ECS云服务器：阿里云、腾讯云、西部数码云，至少要1核CPU，2G内存的

二、文件上传演示

1、上传文件的界面

必须是多功能表单（enctype="multipart/form-data" type="file"）

<%@ page language='java' contentType='text/html; charset=UTF-8'
   pageEncoding='UTF-8'%>
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' '.dtd'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>图片上传</title>
</head>
<body>
   <form class="form-inline"
       action="${pageContext.request.contextPath }/sy/clz_upload.action" method="post" enctype="multipart/form-data">
       <input type="hidden" name="cid" value="${result.cid }"><br>
       <input type="hidden" name="cname" value="${resultame }"><br>
       <input type="hidden" name="cteacher" value="${result.cteacher}"><br>
       <input type="file" name="img">
       <input type="submit">
   </form>

</body>
</html>

2、struts必须按照指定的格式去接受参数变量

指定的格式：

①上传的文件

②、上传的文件名

③、上传的文件类别

private File img;
   private String imgFileName;
   private String imgContentType;
   public File getImg() {
       return img;
   }

   public void setImg(File img) {
       this.img = img;
   }

   public String getImgFileName() {
       return imgFileName;
   }

   public void setImgFileName(String imgFileName) {
       this.imgFileName = imgFileName;
   }

   public String getImgContentType() {
       return imgContentType;
   }

   public void setImgContentType(String imgContentType) {
       this.imgContentType = imgContentType;
   }

3、web层，写方法

跳转的方法--》upload.jsp

上传的方法：

将指定的文件图片上传到文件目录

将访问图片的请求映射地址更新到数据

//   跳转到文件上传界面
   public String preUpload() throws Exception {
       this.result=this.clzDao.list(clz, null).get(0);
       this.req.setAttribute("result", result);
       return "upload";
   }

   public String upload() throws Exception {
//       img代表客户选择的文件或者图片，再将图片上传到其他地方
//       img代表源头，要将其写入目的地target
       String destDir="E:/Temp/mvc/upload";
       String serverDiv="/uploadImages";
//       E:/Temp/mvc/upload/1.png
//       http://localhost:8080/struts/upload/xx.png
       FileUtils.copyFile(img,new File(destDir+"/"+imgFileName));
//       数据库保存的值是/uploadImages/xx.png
//       图片是在E:/Temp/mvc/upload/1.png
//       访问：http://localhost:8080/struts/uploadImages/xx.png
       clz.setPic(serverDiv+"/"+imgFileName);
       this.clzDao.edit(clz);
       return TOLIST;
   }

4、在tomcat中的server.xml中配置

注意放置的顺序

<?xml version="1.0" encoding="UTF-8"?>
<Server port="8005" shutdown="SHUTDOWN">
<Listener className="org.apache.catalina.startup.VersionLoggerListener"/>


<Listener SSLEngine="on" className="org.apache.catalina.core.AprLifecycleListener"/>

<Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener"/>
<Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener"/>
<Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener"/>


<GlobalNamingResources>

<Resource auth="Container" description="User database that can be updated and saved" factory="org.apache.catalina.users.MemoryUserDatabaseFactory" name="UserDatabase" pathname="conf/tomcat-users.xml" type="org.apache.catalina.UserDatabase"/>
</GlobalNamingResources>


<Service name="Catalina">





<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>






<Connector port="8009" protocol="AJP/1.3" redirectPort="8443"/>




<Engine defaultHost="localhost" name="Catalina">





<Realm className="org.apache.catalina.realm.LockOutRealm">

<Realm className="org.apache.catalina.realm.UserDatabaseRealm" resourceName="UserDatabase"/>
</Realm>

<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true">





<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" pattern="%h %l %u %t "%r" %s %b" prefix="localhost_access_log" suffix=".txt"/>


<Context docBase="E:/Temp/mvc/upload" path="/uploadImages"/>
<Context docBase="lv_struts" path="/lv_struts" reloadable="true" source="org.eclipse.jst.jee.server:lv_struts"/></Host>

</Engine>
</Service>
</Server>

5、配置struts-sy.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
   "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
   ".5.dtd">
<struts>
   <package name="sy" extends="base" namespace="/sy">
   <action name="/clz_*" class="com.lv.web.ClzAction" method="{1}" >
   <result name="list">/clzList.jsp</result>
   <result name="toEdit">/clzEdit.jsp</result>
   <result name="toList" type="redirectAction">/clz_list</result>
   <result name="upload">/upload.jsp</result>
   </action>
   </package>
</struts>

6、显示上传的图片(clzList.jsp）

直接访问img映射地址，通过img标签

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib uri="" prefix="z"%>
<%@ taglib uri="" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
   href=".5.0/css/bootstrap.css"
   rel="stylesheet">
<script
   src=".5.0/js/bootstrap.js"></script>
<title>博客列表</title>
<style type="text/css">
.page-item input {
   padding: 0;
   width: 40px;
   height: 100%;
   text-align: center;
   margin: 0 6px;
}

.page-item input, .page-item b {
   line-height: 38px;
   float: left;
   font-weight: 400;
}

.page-item.go-input {
   margin: 0 10px;
}
</style>
</head>
<body>
   <form class="form-inline"
       action="${pageContext.request.contextPath }/sy/clz_list.action" method="post">
       <div class="form-group mb-2">
           <input type="text" class="form-control-plaintext" name="title"
               placeholder="请输入书籍名称">



       </div>
       <button type="submit" class="btn btn-primary mb-2">查询</button>
       <a class="btn btn-primary mb-2" href="${pageContext.request.contextPath }/sy/clz_toEdit.action">新增</a>
   </form>

   <table class="table table-striped bg-success">
       <thead>
           <tr>
               <th scope="col">ID</th>
               <th scope="col">名字</th>
               <th scope="col">老师</th>
               <th scope="col">操作</th>
           </tr>
       </thead>
       <tbody>
           <c:forEach var="b" items="${result }">
           <tr>
               <td>${b.cid }</td>
               <td>${bame}</td>
               <td>${b.cteacher }</td>
               <td>
                   <img alt="" src="${b.pic }" style="width: 50px;height: 70px;">
               </td>
               <td>
<a href="${pageContext.request.contextPath }/sy/clz_toEdit.action?cid=${b.cid}">修改</a>
<a href="${pageContext.request.contextPath }/sy/clz_del.action?cid=${b.cid}">删除</a>
<a href="${pageContext.request.contextPath }/sy/clz_preUpload.action? cid=${b.cid}">上传图片</a>
               </td>
           </tr>
           </c:forEach>
       </tbody>
   </table>
   
   <z:page pageBean="${pageBean }"></z:page>

</body>
</html>

效果：

本期内容结束~

USB迷 | 专注于互联网分享

文件上传.

文件上传.

接着这期内容：根据struts的增删改查

课程目标：

一、文件上传的三种方式

二、文件上传演示

文件上传.

接着这期内容：根据struts的增删改查

课程目标：

一、文件上传的三种方式

二、文件上传演示

与本文相关的文章

评论列表 (0)