AjaxUpload上传控件，使用该控件可以实现带进度条的上传。
ajaxfileupload.js
//String retxt ="{error:'',\n msg:'success'\n}"; 调用该插件，返回字符串格式
//response.getWriter().print(retxt); jsp代码
jQuery.extend({
createUploadIframe: function (id, uri) {
//创建 frame
var frameId = 'jUploadFrame' + id;
var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
if (window.ActiveXObject) {
if (typeof uri == 'boolean') {
iframeHtml += ' src="' + 'javascript:false' + '"';
}
else if (typeof uri == 'string') {
iframeHtml += ' src="' + uri + '"';
}
}
iframeHtml += ' />';
jQuery(iframeHtml).appendTo(document.body);
return jQuery('#' + frameId).get(0);
},
createUploadForm: function (id, fileElementId, data) {
//创建 frame
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
if (data) {
for (var i in data) {
jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
}
}
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
//设置属性
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
},
ajaxFileUpload: function (s) {
s = jQuery.extend({}, jQuery.ajaxSettings, s);
var id = new Date().getTime();
var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data));
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
// 监控请求
if (s.global && !jQuery.active ++) {
jQuery.event.trigger("ajaxStart");
}
var requestDone = false;
// 创建请求对象
var xml = {};
if (s.global)
jQuery.event.trigger("ajaxSend", [xml, s]);
//等待一个响应返回
var uploadCallback = function (isTimeout) {
var io = document.getElementById(frameId);
try {
if (io.contentWindow) {
xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
} else if (io.contentDocument) {
xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
}
} catch (e) {
//alert("666666");
jQuery.handleError(s, xml, null, e);
}
if (xml || isTimeout == "timeout") {
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" : "error";
//请求成功
if (status != "error") {
// 处理数据 //根据传送的type类型，返回json对象，此时返回的data就是后台操作后的返回结果
var data = jQuery.uploadHttpData(xml, s.dataType);
if (s.success)
s.success(data, status);
// 触发全局返回
if (s.global){
jQuery.event.trigger("ajaxSuccess", [xml, s]);
}
//alert("if");
} else{
jQuery.handleError(s, xml, status);
}
} catch (e) {
//alert("777777");
status = "error";
jQuery.handleError(s, xml, status, e);
}
// 请求完成
if (s.global)
jQuery.event.trigger("ajaxComplete", [xml, s]);
// 处理全局AJAX计数器
if (s.global && ! --jQuery.active)
jQuery.event.trigger("ajaxStop");
// 处理结果
if (s.complete)
s.complete(xml, status);
jQuery(io).unbind();
setTimeout(function () {
try {
jQuery(io).remove();
jQuery(form).remove();
} catch (e) {
//alert("888888");
jQuery.handleError(s, xml, null, e);
}
}, 100);
xml = null;
}
}
// 超时检查
if (s.timeout > 0) {
setTimeout(function () {
if (!requestDone)
uploadCallback("timeout");
}, s.timeout);
}
try {
var form = jQuery('#' + formId);
jQuery(form).attr('action', s.url);
jQuery(form).attr('method', 'POST');
jQuery(form).attr('target', frameId);
if (form.encoding) {
jQuery(form).attr('encoding', 'multipart/form-data');
}
else {
jQuery(form).attr('enctype', 'multipart/form-data');
}
jQuery(form).submit();
} catch (e) {
//alert("9999");
jQuery.handleError(s, xml, null, e);
}
jQuery('#' + frameId).load(uploadCallback);
return { abort: function () { } };
},
uploadHttpData: function (r, type) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
if (type == "script")
jQuery.globalEval(data);
if (type == "json")
eval("data = " + data);
if (type == "html")
jQuery("<div>").html(data).evalScripts();
return data;
}
});处理上传操作的JS，由上传按钮的事件调用。接收参数为服务器处理文件的jsp页面或者注册的服务，第二个参数为上传成功后需要显示给用户的反馈信息。
注：此函数也可以实现下载，只需将fileElementId引用的input控件的url指向服务器的某个能返回流的服务或者界面，就会在客户端弹出下载界面。urlStr = input控件指向的文件名即可。
function ajaxFileUpload(urlStr,showMegStr) {
var form = $("<form>");
form.ajaxStart(function () {
alert("上传开始");//此处可以利用JS生成上传的动画
});
form.ajaxComplete(function () {
alert("上传结束");
});
jQuery.ajaxFileUpload(
{
url: urlStr,
secureuri: false,
fileElementId: 'upload_attach',
dataType: 'json',
data: { 'name': 'logan', 'id': 'id' },
success: function (data, status) { //data后台jsp返回结果，status Ajaxfileupload控件返回的状态
if (typeof (data.error) != '') {
if (data.error == '') {
alert(showMegStr);
} else {
alert("上传文件格式不正确！");
}
}
},
error: function (data, status, e) {
alert(e);
}
});
return true;
}用户界面：
selectFilePage.jsp
<html>
<head>
<title id="title"></title>
</head>
<body>
<!-- 标题栏 -->
<div class='' id='filePageNagText'><span>浏览文件</span></div>
<!-- 列表table -->
<form id="form1" name="form1" encType="multipart/form-data" method="post" target="hidden_frame">
<div id ="AttachDiv" >
<input type="file" name="upload_attach" id="upload_attach" >
<iframe name='hidden_frame' id="hidden_frame" style='display: none'></iframe>
</div>
</form>
</body>
</html>后端处理上传文件的JSP，接收文件流并写入服务器本地磁盘
<%@ page import="java.io.*,java.util.*, javax.servlet.*" %>
<%@ page import="javax.servlet.http.*" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="org.apache.commons.io.output.*" %>
<%@ page import="inforunner.oatransmanager.PublicLib" %>
<%@ page import="inforunner.util.ConfigPathUtils" %>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Map"%>
<%
int maxFileSize = 200 * 1024 * 1024;
int maxMemSize = 200 * 1024 * 1024;
ServletContext context = pageContext.getServletContext();
Map<String, String > map = new HashMap();
// String realPath = request.getRealPath("/platform/inforunner/TransUI/upload");
String filePath = ConfigPathUtils.getEnvelopUploadPath(); //读配置文件公文上传目录request.getRealPath("/platform/inforunner/TransUI/upload");
//System.out.println("filePath="+filePath );
String retXML= "";
// 验证上传内容的类型
String contentType = request.getContentType();
File file = null;
if ((contentType.indexOf("multipart/form-data") >= 0)) {
DiskFileItemFactory factory = new DiskFileItemFactory();
// 设置内存中存储文件的最大值
factory.setSizeThreshold(maxMemSize);
// 本地存储的数据大于 maxMemSize.
//factory.setRepository(new File("c:\\temp"));
// 创建一个新的文件上传处理程序
ServletFileUpload upload = new ServletFileUpload(factory);
// 设置最大上传的文件大小
upload.setSizeMax( maxFileSize );
try{
// 解析获取的文件
List fileItems = upload.parseRequest(request);
// 处理上传的文件
Iterator i = fileItems.iterator();
while ( i.hasNext () )
{
FileItem fi = (FileItem)i.next();
if ( !fi.isFormField () )
{
// 获取上传文件的参数
String fieldName = fi.getFieldName();
String fileName = fi.getName();
boolean isInMemory = fi.isInMemory();
long sizeInBytes = fi.getSize();
//检查上传文件夹是否存在，不存在就创建
File uploadFile = new File(filePath);
if (!uploadFile.exists() && !uploadFile.isDirectory()) {
uploadFile.mkdirs();
}
// 写入文件
if( fileName.lastIndexOf("\\") >= 0 ){
file = new File( filePath , fileName.substring( fileName.lastIndexOf("\\"))) ;
}else{
file = new File( filePath , fileName.substring(fileName.lastIndexOf("\\")+1)) ;
}
fi.write( file ) ;
map.put("msg","true" );
map.put("error","" );
System.out.println("Uploaded Filename: " + filePath + "/" +fileName);
}
}
//out.println("</body>");
//out.println("</html>");
}catch(Exception ex) {
System.out.println(ex);
map.put("msg","false" );
map.put("error",ex.toString() );
}
}
response.setStatus(200);
String retxt ="{error:'', msg:'success',fileName:''}"; //此处返回格式依据，ajaxfileupload.js插件
response.getWriter().print(retxt);
%>
扫一扫
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
