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上传图片
在Spring MVC框架中，集成jQuery插件实现Ajax上传图片和文件是一种常见的需求，尤其是在现代Web应用中，这种异步上传方式能提供更好的用户体验。本文将详细介绍如何在Spring MVC项目中集成Ajax上传功能，并重点关注...
// 调用Ajax上传函数 uploadImage(); }); }); ``` 3. **创建Ajax请求**：在`uploadImage()`函数中，我们将构建Ajax请求，使用FormData对象来封装图片文件。 ```javascript function uploadImage() { var ...
在Web开发中，批量上传图片是一项常见的功能，尤其是在社交媒体、电商平台和内容管理系统中。本教程将深入探讨如何使用PHP和AJAX技术实现这一功能。PHP作为服务器端脚本语言，处理文件上传，而AJAX则负责异步通信，...
在.NET开发中，实现无刷新上传图片功能，通常会结合Ajax技术来提供用户友好的交互体验。Ajax（Asynchronous JavaScript and XML）允许我们在不重新加载整个网页的情况下与服务器交换数据并更新部分网页内容，这正是...
"fileUpload(兼容IE的Ajax上传图片)"是一个专为解决浏览器兼容性问题而设计的解决方案，它确保在包括IE8在内的较旧版本Internet Explorer浏览器中也能实现Ajax方式的图片上传。 Ajax（Asynchronous JavaScript and ...
首先，让我们从AJAX上传图片开始。AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在图片上传场景中，AJAX可以提供无刷新的用户体验，使得用户在上...
本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。通过这种方式，用户无需等待页面刷新，即可完成操作，提升了交互性。 首先，`jquery.js` 是jQuery库的核心文件...
首先，理解AJAX上传的基本原理。传统的文件上传通常涉及整个页面的刷新，而AJAX允许我们仅更新部分网页内容，提高用户体验。通过XMLHttpRequest对象或使用jQuery等库提供的方法，我们可以创建异步请求，将文件数据...
在本场景中，我们将探讨如何在Struts2中实现AJAX上传图片并同时提交表单数据。 **一、Struts2文件上传** 在Struts2中，文件上传主要依赖于`org.apache.struts2.interceptor.FileUploadInterceptor`拦截器。首先，...
**Ajax上传图片或文件技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在现代Web应用中，它被广泛用于实现页面的异步交互，提升用户体验。本篇...
本篇文章将详细介绍如何利用Ajax实现图片上传的功能，包括前端页面设计、图片预览功能、以及Ajax上传代码实现等关键步骤。 #### 二、前端页面设计 前端页面是用户与系统交互的第一线，因此设计一个友好且功能完整的...
在这个"php+ajax上传图片"实例中，我们将看到以下关键知识点： 1. **HTML表单**：用于用户选择要上传的图片。通常，我们会有一个`<input>`元素，其`type`属性设置为`file`，让用户选择本地的图片文件。 2. **...
本项目"PHP+AJAX上传图片带滚动条"结合了这两种技术，为用户提供了友好的图片上传体验，同时增加了进度条展示，使得上传过程更加直观。 首先，PHP是一种服务器端的脚本语言，主要用于构建动态网站。在这个项目中，...
Ajax上传图片(缩略图)源码 示例使用该方法主要是为了解决打印报表时由于图片大小没有合理的比例规范导致报表样式变形，同样该方法也适合网站或论坛由用户上传源图片生成微缩头像等。 1.Ajax无刷新上传图片。（jquery...
3.图片上传 并且ajax无刷新显示（使用了ajaxfileupload插件） 学习JFinal练习时所作demo，分享出来供需要的大家参考 项目引入eclipse，使用tomcat容器运行即可，localhost/项目名 访问 数据库mysql，转储的sql文件...
ajax上传图片