zoukankan      html  css  js  c++  java
  • Extjs 文件上传和下载

    一个简单的图片上传和现实在页面上的Demo,前台用的是extjs2.2,后台用的是JDBC+servlet,数据库用的是Oracle,放图片的字段类型是BLOB,存入到数据库中的是以二进制的形式存在。

    这是上传的界面效果,我是通过点击页面上面的一个Button来弹出这个上传的windows

    updatefile = function() {
    var form = new Ext.form.FormPanel({
         baseCls : 'x-plain',
         labelWidth : 70,
         fileUpload : true,
         defaultType : 'textfield',
         items : [{
            xtype : 'textfield',
            fieldLabel : '上传文件名',
            name : 'userfile',
            id : 'userfile',
            inputType : 'file',
            blankText : 'File can\'t not empty.',
            anchor : '100%' // anchor width by percentage
           }]
        });

    var win = new Ext.Window({
         title : '照片上传',
         width : 400,
         height : 100,
         minWidth : 300,
         minHeight : 100,
         layout : 'fit',
         plain : true,
         bodyStyle : 'padding:5px;',
         buttonAlign : 'center',
         items : form,
         buttons : [{
          text : '上传',
          handler : function() {
           if (form.form.isValid()) {
            if(Ext.getCmp('userfile').getValue() == ''){
             Ext.Msg.alert('错误','请选择你要上传的文件');
             return;
            }
            Ext.MessageBox.show({
               title : '请等待',
               msg : '文件正在上传...',
               progressText : '',
               width : 300,
               progress : true,
               closable : false,
               animEl : 'loding'
              });
            form.getForm().submit({
             url : 'Action/UpdateLoad',
             method : 'POST',
             success : function(form, action) {
              Ext.Msg.alert('Message',
                action.result.success);
              win.close();
             },
             failure : function() {
              Ext.Msg.alert('Error',
                'File upload failure.');
             }
            })
           }
          }
         }, {
          text : '关闭',
          handler : function() {
           win.close();
          }
         }]
        });
    win.show();
    }

    上面显示的是上传windows的js代码

    下面是servlet的代码:

    String xxx = request.getParameter("userfile");
      
       SmartUpload mySmartUpload = new SmartUpload();
       String myFileName = ""; //myFileName为带文件后缀
       String filename = ""; //filename为不带文件后缀
       String fileext = "";
       int filesize = 0;
      
       mySmartUpload.initialize(config,request,response);
       mySmartUpload.upload();
       File myFile = mySmartUpload.getFiles().getFile(0);
      
       if (!myFile.isMissing()){
          int t1;
          myFileName = myFile.getFileName();
          filename = myFileName.substring(0,myFileName.lastIndexOf('.'));
          t1 = myFileName.lastIndexOf('.')+1;
          fileext = myFileName.substring(t1,myFileName.length());
          filesize = myFile.getSize();
       }
      
       String trace="c:/"+myFileName;
       myFile.saveAs(trace,mySmartUpload.SAVE_PHYSICAL);
       java.io.File file = new java.io.File(trace);
       java.io.FileInputStream fis = new java.io.FileInputStream(file);
      
       Connection conn = MyConnection.getConnection();
      
       conn.setAutoCommit(false);
      
       BLOB blob = null;
       PreparedStatement pstmt = conn.prepareStatement("insert into zdbphoto(workid,photo) values(?,empty_blob())");
       pstmt.setString(1,"1");
       pstmt.executeUpdate();
       pstmt.close();
      
       pstmt = conn.prepareStatement("select photo from zdbphoto where workid= ? for update");  
       pstmt.setString(1,"1");  
       ResultSet rset = pstmt.executeQuery();
       if (rset.next())blob = (BLOB)rset.getBlob(1);
      
       pstmt = conn.prepareStatement("update zdbphoto set photo=? where workid=?");
       OutputStream out = blob.getBinaryOutputStream();
      
       int count = -1;
       int total = 0;
      
       byte[] data = new byte[(int)fis.available()];
      
       fis.read(data);
         out.write(data);
      
         fis.close();;  
         out.close();;  
      
         pstmt.setBlob(1,blob);;  
         pstmt.setString(2,"1");;  
      
         pstmt.executeUpdate();;  
         pstmt.close();;  
      
         conn.commit();;  
         conn.close();;
        
         JSONObject jObject = new JSONObject();
         jObject.put("success", "true");
         response.getWriter().print(jObject.toString());

    上传的原理是,首先将图片上传到服务器的C盘根目录下面,因为我的电脑既是服务器又是客户端,所有,在我的C盘下面有一个我上传的图片。然后在我的数据库中插入一条记录,将放入图片的字段值为空。然后根据我的条件将该条记录更新,把我图片在我的servlet里面进行二进制转换,最后将我的二进制图片存到数据库中去。上传搞定。。。。

    接下来是将数据库中的图片取出来并且显示到extjs的windows上。

    这是从数据库中读取字段类型为BLOB的图片,然后显示到我的windows上。tiems后面跟的是HTML代码显示的是图片的servlet。

    下面是servlet的写法

    一个简单的SQL语句,然后将从数据库中获取的图片解码,通过ServletOutputStream将图片传到前台的windows上面。

    虽然这个上传和显示是一个Demo,但是再复杂的上传和下载,万变不离其中,把原理搞懂了,其他的可以自己慢慢摸索

  • 相关阅读:
    hdu 5387 Clock (模拟)
    CodeForces 300B Coach (并查集)
    hdu 3342 Legal or Not(拓扑排序)
    hdu 3853 LOOPS(概率DP)
    hdu 3076 ssworld VS DDD(概率dp)
    csu 1120 病毒(LICS 最长公共上升子序列)
    csu 1110 RMQ with Shifts (线段树单点更新)
    poj 1458 Common Subsequence(最大公共子序列)
    poj 2456 Aggressive cows (二分)
    HDU 1869 六度分离(floyd)
  • 原文地址:https://www.cnblogs.com/hannover/p/1894820.html
Copyright © 2011-2022 走看看