一个简单的图片上传和现实在页面上的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，但是再复杂的上传和下载，万变不离其中，把原理搞懂了，其他的可以自己慢慢摸索
