public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List items = null;
try {
items = (List) upload.parseRequest(request);
} catch (FileUploadException e1) {
e1.printStackTrace();
}
String rootPath = request.getSession().getServletContext().getRealPath("/");
String saveReportPath = rootPath + "Upload/";
MyUtils.mkDirectory(saveReportPath);
boolean flag = false;
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (item.getContentType() != null) {
String newFileName = MyUtils.randomRename(item.getName(), saveReportPath);
String reportAbsFilePath = saveReportPath + newFileName; // 文件保存路径
File file = new File(reportAbsFilePath);
try {
item.write(file); // 开始上传写入服务器
flag = true;
} catch (Exception e) {
flag = false;
e.printStackTrace();
} finally {
file = null;
item = null;
if (flag) {
response.getWriter().write("{success:\"true\"}");
} else {
response.getWriter().write("{success:\"false\"}");
}
flag = false;
}
}
}
}
上面的是servlet处理上传。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="Stylesheet" type="text/css" href="Ext2.2/data-view.css" />
<link rel="stylesheet" type="text/css" href="Ext2.2/resources/css/ext-all.css" />
<link rel="stylesheet" href="Ext.ux.UploadDialog/UploadDialog/css/Ext.ux.UploadDialog.css" />
<script src="Ext2.2/ext-base.js"></script>
<script src="Ext2.2/ext-all.js"></script>
<script src="Ext2.2/ext-lang-zh_CN.js"></script>
<script src="Ext2.2/data-view-plugins.js"></script>
<script type="text/javascript" src="Ext.ux.UploadDialog/Ext.ux.UploadDialog.packed.js"></script>
<script type="text/javascript">
// Download by http://www.codefans.net
Ext.onReady(function(){
Ext.QuickTips.init();
var store = new Ext.data.JsonStore({
url: '/ext_upload/servlet/DataViewImages',
root: 'images',
fields: ['name', 'url', {name:'size', type: 'float'}]
});
store.load();
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="">{shortName}</span>',
'<span>{sizeString}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
);
var customEl;
var ResizableExample = {
init: function(){
var custom = new Ext.Resizable('custom', {
wrap:true,
pinned:true,
minWidth:50,
minHeight: 50,
preserveRatio: true,
handles: 'all',
draggable:true,
dynamic:true
});
customEl = custom.getEl();
document.body.insertBefore(customEl.dom, document.body.firstChild);
customEl.on('dblclick', function(){
customEl.hide(true);
});
customEl.hide();
}
};
Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);
var dataview = new Ext.DataView({
store: store,
id: "dv",
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',
plugins: [
new Ext.DataView.DragSelector()
],
prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
return data;
},
listeners: {
selectionchange: {
fn: function(dv,nodes){
var l = nodes.length;
var s = '';
panel.setTitle('图片列表 ('+l+' 项'+s+' 被选中)');
}
},
'dblclick': function(){
var selNode = dataview.getSelectedNodes()[0];
var i = document.getElementById("custom");
i.src = "Upload/" + selNode.id;
customEl.center();
customEl.show(true);
}
}
});
var panel = new Ext.Panel({
id:'images-view',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'图片列表(0 项 被选中)',
tbar:[
{text: "添加图片", handler: insertImages}, "-",
{text: "删除图片", handler: deleteImages}
],
butttonAlign: "left",
tools: [{
id:"refresh",
qtip:"刷新图片列表",
on:{click:function(){
panel.body.mask("加载中...", 'x-mask-loading');
setTimeout(function(){
store.reload();
panel.body.unmask();
}, 1000);
}
}
}],
items: dataview
});
panel.render(Ext.getBody());
function insertImages()
{
dialog = new Ext.ux.UploadDialog.Dialog({
url: '/ext_upload/servlet/Upload',
width : 450,
height : 300,
minWidth : 450,
minHeight : 300,
draggable : true,
resizable : true,
modal: true,
reset_on_hide: false,
allow_close_on_upload: false,
upload_autostart: false
});
dialog.show('show-button');
}
function deleteImages()
{
var count = dataview.getSelectionCount();
var nodes = "";
if(count == 0)
{
Ext.Msg.show({
title:"提示框",
msg:"请选择要删除的图片",
buttons:Ext.MessageBox.OK ,
icon:Ext.MessageBox.INFO
});
return false;
}
for(var i = 0; i < count; i++)
{
nodes += dataview.getSelectedNodes()[i].id;
if(i < count -1){
nodes += ",";
}
}
Ext.Msg.confirm("提示框","你确认删除所选图片吗",function(button){
if (button == "yes")
{
Ext.MessageBox.show({
msg:"删除中,请等待...",
progress:true,
progressText: '删除中...',
width:300,
wait:true,
waitConfig:{
interval:100,
duration:1000,
fn:function(){
Ext.Ajax.request({
url: "/ext_upload/servlet/DeleteImages",
params: {
"Nodes": nodes
},
callback: function(options, success, response)
{
if(success)
{
Ext.Msg.show({
title:"提示框",
msg:"删除图片成功",
buttons:Ext.MessageBox.OK ,
icon:Ext.MessageBox.INFO,
fn:function(){
store.reload();
}
});
}
else
{
Ext.Msg.show({
title:"提示框",
msg:"删除图片失败, 请重试",
buttons:Ext.MessageBox.OK ,
icon:Ext.MessageBox.WARNING
});
}
}
});
Ext.MessageBox.hide();
}},
closable:true
});
}
});
}
});
</script>
</head>
<body>
<div id="div1" style="text-align:center; vertical-align:middle">
<img id="custom" width="200" height="150" style="position:absolute;left:0;top:0;" />
</div>
</body>
</html>
这是显示的页面。
相关推荐
Ajax上传图片
php+ajax批量上传图片，php+ajax上传图片，ajax+php上传图片，批量上传，批量上传图片
实现Jquery Ajax 给服务端上传一个图片
ajax上传图片，PHP上传图片，PHP上传图片跨域，跨域上传图片，上传图片缩览图
AJAX 图片上传 进度条 无刷新 AJAX上传图片，并显示上传进度条
非传统ajax上传，实现更方便，使用更方便，二次修改更方便
fileUpload(兼容IE的Ajax上传图片)，可兼容IE8，解决了ajaxfileupload.js无效的问题
Ajax上传图片(缩略图)源码 示例使用该方法主要是为了解决打印报表时由于图片大小没有合理的比例规范导致报表样式变形，同样该方法也适合网站或论坛由用户上传源图片生成微缩头像等。 1.Ajax无刷新上传图片。（jquery...
3.图片上传 并且ajax无刷新显示（使用了ajaxfileupload插件） 学习JFinal练习时所作demo，分享出来供需要的大家参考 项目引入eclipse，使用tomcat容器运行即可，localhost/项目名 访问 数据库mysql，转储的sql文件...
springmvc集合jquery插件上传图片及文件，非常简单，代码量非常少，可无缝引入到你的项目中。网上很多资源都无法运行，这个绝对可用。
ajax上传图片
ajax实现图片上传
使用struts2 框架 中的文件上传，然后使用ajax上传图片以及form表单的数据
ajax图片上传插件，ajax图片上传插件，ajax图片上传插件，ajax图片上传插件
asp.net+ajax批量上传图片，asp.net+ajax上传图片，ajax+asp.net上传图片，批量上传，批量上传图片
net ajax 图片无刷新上传。 选择文件后立即上传文件。并生成指定尺寸的缩略图。 net上传文件生成多个缩略图。
很不错的php+ajax上传图片（js）实例，供初学者学习。。。。。。。