• ExtJS4学习笔记四－－图片上传

    相关包文件： 
    commons-fileupload-1.2.1.jar 
    commons-io-1.4.jar

    前端程序： 

    Html代码  收藏代码
    1. <HTML>  
    2.  <HEAD>  
    3.   <TITLE>Ext.form.field.File示例</TITLE>  
    4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    5.   <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  
    6.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
    7.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>  
    8.   <script type="text/javascript">  
    9.     Ext.onReady(function(){  
    10.         Ext.QuickTips.init();  
    11.         var uploadForm = Ext.create('Ext.form.Panel',{  
    12.             title:'Ext.form.field.File示例',  
    13.             bodyStyle:'padding:5 5 5 5',//表单边距  
    14.             frame : true,  
    15.             height:100,  
    16.             300,  
    17.             renderTo :'form',  
    18.             defaults:{//统一设置表单字段默认属性  
    19.                 labelSeparator :'：',//分隔符  
    20.                 labelWidth : 50,//标签宽度  
    21.                 width : 150,//字段宽度  
    22.                 allowBlank : false,//是否允许为空  
    23.                 labelAlign : 'left',//标签对齐方式  
    24.                 msgTarget :'side'   //在字段的右边显示一个提示信息  
    25.             },  
    26.             items:[{  
    27.                 xtype: 'filefield',  
    28.                 name: 'photo',  
    29.                 fieldLabel: '照片',  
    30.                 anchor: '100%',  
    31.                 buttonText: '选择照片...'  
    32.             }],  
    33.             buttons: [{  
    34.                 text: '上传文件',  
    35.                 handler: function() {  
    36.                     var form = uploadForm.getForm();  
    37.                     if(form.isValid()){  
    38.                         form.submit({  
    39.                             url: 'uploadServer.jsp',  
    40.                             waitMsg: '正在上传照片文件请稍候...',  
    41.                             success: function(fp, o) {  
    42.                                 Ext.Msg.alert('提示信息', '您的照片文件 "' + o.result.file + '"已经成功上传。');  
    43.                             }  
    44.                         });  
    45.                     }  
    46.                 }  
    47.             }]  
    48.         });  
    49.     });  
    50.   </script>  
    51.  </HEAD>  
    52.  <BODY STYLE="margin: 10px">  
    53.      <div id='form'></div>  
    54.  </BODY>  
    55. </HTML>  


    JSP代码： 

    Jsp代码  收藏代码
      1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
      2. <%@ page import="org.apache.commons.fileupload.*"%>  
      3. <%@ page import="org.apache.commons.fileupload.FileItem"%>  
      4. <%  
      5. DiskFileUpload upload = new DiskFileUpload();  
      6. upload.setHeaderEncoding("utf8");  
      7. java.util.List items = upload.parseRequest(request);  
      8. java.util.ListIterator listIterator = items.listIterator();  
      9. String fileName = "";  
      10. while(listIterator.hasNext()){  
      11.     FileItem item = (FileItem)listIterator.next();  
      12.     if(!item.isFormField()){  
      13.         fileName = item.getName();  
      14.         fileName = fileName.substring(fileName.lastIndexOf("\\")+1);//从全路径中提取文件名  
      15.     }  
      16. }  
      17. String msg = "{success:true,file:'"+fileName+"'}";  
      18. response.getWriter().write(msg);  
      19. %>  
  • 相关阅读:
    软件工程第二次作业
    软件工程第一次作业
    细说GitHub分支策略和工作流
    第二次结对作业 四则运算生成器
    第一次结对作业
    软件工程第三次作业
    软件工程第二次作业
    软件工程第一次作业
    人工智能第一次作业
    人工智能第二次作业 书上69页作业
  • 原文地址：https://www.cnblogs.com/zhaoxd/p/3049235.html
Copyright © 2020-2023  润新知