JavaWEB基础之文件上传实现

举报
yd_273762914 发表于 2020/12/02 23:37:32 2020/12/02
【摘要】   准备:我们需要找一张绿色或者其它颜色的背景图,放在photo文件夹里就好哈,然后加jar:common-io和commo-fileupload就可以哈   创建progress.css文件:   .pro{   height:15px;   width:500px;   background: #F...

 

准备:我们需要找一张绿色或者其它颜色的背景图,放在photo文件夹里就好哈,然后加jar:common-io和commo-fileupload就可以哈

 

创建progress.css文件:

 


  
  1. .pro{
  2.   height:15px;
  3.   width:500px;
  4.   background: #FFFFF0;
  5.   border: 1px solid #8FBC8F;
  6.   margin: 0;
  7.   padding: 0;
  8.   display:none;
  9.   position: relative;
  10.   left:25px;
  11.   float:left;
  12. }

 

 

 

 

创建uploadAjax.js


  
  1. function go(){
  2. f1.submit();
  3. document.getElementById("pro").style.display="block";
  4. document.getElementById("prop").style.display="";
  5. timer=setInterval("getP()",50);
  6. }
  7. var xmlHttpRequest;
  8. function getP(){
  9. if(window.XmlHttpRequest){
  10. xmlHttpRequest=new XmlHttpRequest();
  11. }else{
  12. xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
  13. }
  14. xmlHttpRequest.onreadystatechange=callBack;
  15. url="GetProgressServlet";
  16. xmlHttpRequest.open("post",url,true);
  17. xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  18. xmlHttpRequest.send("&timeStamp="+(new Date()).getTime());
  19. }
  20. //回调函数
  21. function callBack(){
  22. if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
  23. result=xmlHttpRequest.responseText;
  24. var result=result.replace(/(^\s*)|(\s*$)/g, "");
  25. var res=result.split(",");
  26. var flag=res[1];
  27. var per=parseInt(res[0]);
  28. var err=res[2];
  29. document.getElementById("imgpro").style.width=per*5+"px";
  30. document.getElementById("prop").innerHTML=per+"%";
  31. if(flag=="OK"){
  32. window.clearInterval(timer);
  33. alert("上传成功!");
  34. document.getElementById("pro").style.display="none";
  35. document.getElementById("prop").innerHTML="";
  36. f1.reset();
  37. }
  38. if(err!=""||err.length>0){
  39. window.clearInterval(timer);
  40. alert(err);
  41. }
  42. if(flag==null){
  43. window.clearInterval(timer);
  44. }
  45. }
  46. }

 

调用和引入

 

<link rel="stylesheet" type="text/css" href="css/progress.css">
<script type="text/javascript" src="js/uploadAjax.js" charset="UTF-8"></script>
   

 

 


  
  1. <div class="am-g">
  2. <div class="am-u-sm-12" align="left">
  3. <div class="am-form-group">
  4. <form action="<%=basePath %>UploadSpotImgServlet" name="f1" id="f1" method="post" enctype="multipart/form-data" target="if">
  5. <div class="field">
  6. <a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="30" type="file" name="logo" data-validate="required:请选择上传文件,regexp#.+.(jpg|jpeg|png|gif)$:只能上传jpg|gif|png格式文件" /></a>
  7. </div>
  8. <br>
  9. <input type="reset" name="res1" value="重置" class="am-btn am-btn-primary" />
  10. <input type="submit" name="but1" value="提交" onclick="go();" class="am-btn am-btn-primary" />
  11. </form><br>
  12. <div id="pro" class="pro" align="left" style="height:1px;width:600px;">
  13. <img alt="" src="photo/progress.png" width="0px" id="imgpro">
  14. </div>
  15. <span id="prop" style="width:15px;height:15px;display: none;">0%</span>
  16. <br><br>
  17. <iframe id="if" name="if" src="" style="display: none"></iframe>
  18. </div>
  19. </div>
  20. </div>

 

 

 

创建UploadSpotImgServlet


  
  1. public class UploadSpotImgServlet extends HttpServlet {
  2. /**
  3. *
  4. */
  5. private static final long serialVersionUID = 1L;
  6. private String fileName;
  7. private File tempFile;
  8. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  9. //设置编码格式为utf-8
  10. response.setContentType("text/html;charset=UTF-8");
  11. PrintWriter out1 = response.getWriter();
  12. request.setCharacterEncoding("UTF-8");
  13. //获取session,保存进度和上传结果,上传结果初始值为NOK,当为Ok表示上传完成
  14. HttpSession session=request.getSession();
  15. session.setAttribute("prog", "0");
  16. session.setAttribute("result", "NOK");
  17. session.setAttribute("error", "");
  18. String error="";
  19. //给上传的文件设一个最大值,这里是不得超过50MB
  20. int maxSize=50*1024*1024;
  21. //创建工厂对象和文件上传对象
  22. DiskFileItemFactory factory=new DiskFileItemFactory();
  23. ServletFileUpload upload=new ServletFileUpload(factory);
  24. try {
  25. //解析上传请求
  26. List items=upload.parseRequest(request);
  27. Iterator itr=items.iterator();
  28. while(itr.hasNext()){
  29. FileItem item=(FileItem)itr.next();
  30. //判断是否为文件域
  31. if(!item.isFormField()){
  32. if(item.getName()!=null&&!item.getName().equals("")){
  33. //获取上传文件大小和文件名称
  34. long upFileSize=item.getSize();
  35. fileName=item.getName();
  36. if(upFileSize>maxSize){
  37. error="您上传的文件太大了,请选择不超过50MB的文件!";
  38. break;
  39. }
  40. //此时文件暂存在服务器的内存中,构造临时对象
  41. tempFile=new File(fileName);
  42. //指定文件上传服务器的目录及文件名称
  43. File file=new File("D:\\MyEclipse\\workspace\\TourismSystemServer\\WebRoot\\source\\images",tempFile.getName());
  44. //构造输入流读文件
  45. InputStream is=item.getInputStream();
  46. int length=0;
  47. byte[] by=new byte[1024];
  48. double persent=0;
  49. FileOutputStream fos=new FileOutputStream(file);
  50. PrintWriter out=response.getWriter();
  51. while((length=is.read(by))!=-1){
  52. //计算文件进度
  53. persent+=length/(double)upFileSize*100D;
  54. fos.write(by, 0, length);
  55. session.setAttribute("prog", Math.round(persent)+"");
  56. Thread.sleep(10);
  57. }
  58. fos.close();
  59. Thread.sleep(1000);
  60. }else{
  61. error="没选择上传文件!";
  62. }
  63. }
  64. }
  65. Constant.ImgPath.path = "/source/images/"+tempFile.getName();
  66. //System.out.println(Constant.ImgPath.path);
  67. response.sendRedirect(Constant.WEB_URL_ADDSPOTINFO);
  68. } catch (Exception e) {
  69. e.printStackTrace();
  70. error="上传文件出现错误:"+e.getMessage();
  71. }
  72. if(!error.equals("")){
  73. session.setAttribute("error", error);
  74. }else{
  75. session.setAttribute("result", "OK");
  76. }
  77. out1.flush();
  78. out1.close();
  79. }
  80. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  81. doGet(request, response);
  82. }
  83. }

ok,这样我们就可以上传文件到我们制定的文件夹里哦,还有结合Ajax,就不会出现页面刷新的情况了哦!

 



文章来源: smilenicky.blog.csdn.net,作者:smileNicky,版权归原作者所有,如需转载,请联系作者。

原文链接:smilenicky.blog.csdn.net/article/details/51113823

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200