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
       }]
    });

上面显示的是上传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，但是再复杂的上传和下载，万变不离其中，把原理搞懂了，其他的可以自己慢慢摸索

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。