- 浏览: 1588837 次
- 来自: 上海
文章分类
- 全部博客 (374)
- Java (101)
- Struts (54)
- Oracle (30)
- JavaScript (16)
- Spring (27)
- Hibernate (16)
- MyEclipse (3)
- JSF (1)
- FreeMarker (2)
- SiteMesh (2)
- JfreeChart (2)
- Ibatis (2)
- JSP (12)
- MyBatis (4)
- SWFupload (1)
- EJB (4)
- Jboss (4)
- WebService (2)
- Linux (16)
- Android (2)
- XML (6)
- Java 网络编程 (13)
- AXIS2 (1)
- FTP (1)
- Jswing (1)
- Socket (3)
- 杂文选集 (6)
- solr (2)
- PS (1)
- Tomcat (7)
- JDBC (9)
- Highcharts (1)
- maven (1)
- Nodejs (0)
- navicat (2)
- Exception (5)
- eclipse (3)
- jQuery (1)
- springMVC (4)
- MySQL (11)
- SVN (1)
- Sql Server (1)
- zookeeper (1)
- JVM (1)
- Groovy (2)
- Git (1)
- Nginx (1)
- DynamicReport (1)
- IDEA (2)
- JasperReports (1)
- Postgresql (2)
- Mac (1)
- gradle (1)
- 数据结构算法 (1)
最新评论
-
hpu145:
引用引用
java 千分位的添加和去除 -
被遗忘的下路:
少了个junit-4.8.2的包
SSH2整合完整案例(四十三) -
白天看黑夜:
java过滤emoji字符处理,希望能帮到你http://ww ...
emoji 表情图片解决方法 -
caipeiming:
这个挺好JavaScript实现input输入框控件只允许输入 ...
js 控制文本框只能输入中文、英文、数字等 -
双子树:
东西太好啦受教啊
Struts2 JSP中将list,set ,Map传递到Action然后<s:iterator>遍历(三十五)
目标
1.使用 swfuplaod3.5+servlet 实现多图片上传
效果图:
注:
1. 里面有遮罩层
2. 谈出的层可以拖动
3. 加入了进度条
4. 里面采用jquery 注意引用js
5. google. firefox ie 测试通过
6. 在"允许用户同时上传 20 张图片,单张图片容量不超过1 MB" 上面有个 错误信息层(用于显示上传结果,加载swfupload失败 等详情分析handlers.js)
7. 处理 swfupload 兼容 ie9 上传按钮不出来 问题 ;
8. 红色框:功能主要是在KindEditor中使用(handlers.js 中给注释了)
目录:
需要的jar
commons-fileupload-1.2.jar
commons-io-1.3.2.jar
index.jsp
handlers.js
//处理 ie 9 的兼容性 找到这个方法 修改下就可以了
swfuplaod.js
//简单的处理 文件上传
FileUploadServlet.java
看看js 报错没有 ,如果JS错了,可能就没有效果了。
如果不行可以看看 最新版的 kindeditor-4.1.4 里面自带这个多图上传.
我也是这样,求破
看看js 报错没有 ,如果JS错了,可能就没有效果了。
如果不行可以看看 最新版的 kindeditor-4.1.4 里面自带这个多图上传.
可以了,估计是我ie的缓存的原因。现在没问题了。就是用楼主的办法解决的。非常感谢。
@你去下载一个最新版的 kindeditor-4.1.4 里面自带这个多图上传
至于你说的ie9 这个我肯定也是测试过了的
那个 "全部上传" 是将 上传的图片插入到一个输入控件中, 作为 一条评论 或者 回复 发送出去.
里面的功能 是从
"kindeditor-4.1.4 " 截取出来的,有时间你可以研究下,
我当初 主要是在" kindeditor-3.5" 添加这样一个功能.(我们网站用的3.5版本的)
谢谢!
那个 "全部上传" 是将 上传的图片插入到一个输入控件中, 作为 一条评论 或者 回复 发送出去.
里面的功能 是从
"kindeditor-4.1.4 " 截取出来的,有时间你可以研究下,
我当初 主要是在" kindeditor-3.5" 添加这样一个功能.(我们网站用的3.5版本的)
1.使用 swfuplaod3.5+servlet 实现多图片上传
效果图:
注:
1. 里面有遮罩层
2. 谈出的层可以拖动
3. 加入了进度条
4. 里面采用jquery 注意引用js
5. google. firefox ie 测试通过
6. 在"允许用户同时上传 20 张图片,单张图片容量不超过1 MB" 上面有个 错误信息层(用于显示上传结果,加载swfupload失败 等详情分析handlers.js)
7. 处理 swfupload 兼容 ie9 上传按钮不出来 问题 ;
8. 红色框:功能主要是在KindEditor中使用(handlers.js 中给注释了)
目录:
需要的jar
commons-fileupload-1.2.jar
commons-io-1.3.2.jar
index.jsp
<%@ page language="java" pageEncoding="UTF-8"%> <%@ page isELIgnored="false" %> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>文件上传工具V2.1</title> <link href="${pageContext.request.contextPath}/css/default.css" rel="stylesheet"type="text/css" /> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-latest.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/swfupload.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/handlers.js"></script> <script type="text/javascript"> var contextPath="${pageContext.request.contextPath}"; function startLoad(){ var url=contextPath+"/servlet/FileUploadServlet.htm?jsessionId=${pageContext.session.id}"; //处理上传的servlet var sizeLimit="1 MB";// 文件的大小 注意: 中间要有空格 var types="*.jpg;*.jpeg;*.gif"; //注意是 " ; " 分割 var typesdesc="web iamge file"; //这里可以自定义 var uploadLimit=20; //上传文件的 个数 initSwfupload(url,sizeLimit,types,typesdesc,uploadLimit); } </script> </head> <body> <center> <input type="button" onclick="startLoad()" value="批量图片上传"/></center> </body> </html>
handlers.js
var swfu; var insertAllStatus=true; //全部插入按钮的状态 //初始化 swf function initSwfupload(url,sizeLimit,types,typsdesc,uploadLimit){ //初始化界面 init(uploadLimit,sizeLimit); //初始化 swfupload var settings={ // Flash Settings flash9_url :"http://192.168.1.115:8080/bjsearch/js/plugins/multiimage/js/swfupload_fp9.swf", flash_url : contextPath+"/js/swfupload.swf", file_post_name:"filedata", upload_url: url,// contextPath+"/servlet/FileUploadServlet.htm?jsessionId=${pageContext.session.id}", post_params: {"name" : "test"}, // File Upload Settings file_size_limit : sizeLimit, // 1000MB file_types : types, //*.* file_types_description : typsdesc,//"Web Image Files", file_upload_limit : uploadLimit,//20 file_queue_limit : 0, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete,//选择好文件后提交 file_queued_handler : fileQueued, swfupload_load_failed_handler : swfUploadLoadFailed, //swf 加载失败 swfupload_loaded_handler : swfUploadLoaded, //swf 加载完成 upload_start_handler: uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // Button Settings button_image_url : contextPath+"/images/select-files-zh_CN.png", button_placeholder_id : "buttonPlaceholder", button_width: 72, button_height: 23, button_text : '<span style="display:block;"></span>', custom_settings : { photoContainer_Id : "photoContainer", //图片的容器id btnUpload_ID : "btnUpload", //上传按钮 insertAll_Id : "insertAll", //全部插入 clearAll_Id : "clearAll", //全部清空 errorMsg_Id : "errorMsg", //错误信息 errorMsg_fadeOutTime: 2000 //错误信息谈出的时间 }, // Debug Settings debug: false, //是否显示调试窗口 auto_upload:false }; try{ //等 1秒后初始化 swf setTimeout(function (){swfu = new SWFUpload(settings);},1000); }catch (ex) { var message='<div id="divAlternateContent" style="background-color: #FFFF66; text-align:center;">' +'<font color="red">工具加载失败,请刷新再试!</div>'; addErrorMsg(message,false); this.debug(ex); } } //初始化 界面 function init(uploadLimit,sizeLimit){ if($(".ke-dialog-upload").length>0){ $(".ke-dialog-upload").remove(); } var uploadbody='<div id="uploadBody" class="ke-dialog-upload">' +'<div id="uploadHead" class="ke-dialog-upload-head">' +' <div style="float: left">批量图片上传</div><div id="iconClose" class="ke-dialog-icon-close" title="关闭"></div><div style="clear: both"></div>' +' </div>' +' <!--content-->' +' <div class="ke-dialog-content">' +' <div class="ke-dialog-content-head">' +' <div id="errorMsg" class="ke-dialog-content-error"></div>' +' <div id="swfbuttonParent" class="ke-swfupload-button"><span id="buttonPlaceholder" /></div>' +' <div class="ke-inline-block ke-swfupload-desc">允许用户同时上传 <font color="red">'+uploadLimit+'</font> 张图片,单张图片容量不超过<font color="red">'+sizeLimit+'</font></div>' +' <div class="ke-button-common ke-button-outer ke-swfupload-startupload"><input id="btnUpload" type="button" class="ke-button-common ke-button" value="开始上传"></div>' +' <div style="clear: both;"></div>' +' </div>' +' <div id="photoContainer" class="ke-swfupload-body">' +' </div>' +' </div>' +' <!--bottom-->' +' <div class="ke-dialog-footer">' +' <span class="ke-button-common ke-button-outer" title="全部插入"><input id="insertAll" class="ke-button-common ke-button" type="button" value="全部插入"></span>' +' <span class="ke-button-common ke-button-outer" title="全部清空"><input id="clearAll" class="ke-button-common ke-button" type="button" value="全部清空"></span>' +' <span class="ke-button-common ke-button-outer" title="取消"><input id="btncancel" class="ke-button-common ke-button" type="button" value="取消"></span></div>' +' </div> ' +'<div style="display: block; width: 1903px; height: 12702px; position: absolute; left: 0px; top: 0px; z-index: 811212;" class="ke-dialog-mask"></div>'; $('body').append(uploadbody); $("#iconClose").bind("click",{uploadBodyId:'uploadBody'},iconClose); $("#btncancel").bind("click",{uploadBodyId:'uploadBody'},iconClose); //处理 鼠标拖动层 var dragging = false; var iX, iY; $("#uploadHead").mousedown(function(e) { dragging = true; iX = e.clientX - this.offsetParent.offsetLeft; iY = e.clientY - this.offsetParent.offsetTop; return false; }); document.onmousemove = function(e) { if (dragging) { var e = e || window.event; var oX = e.clientX - iX; var oY = e.clientY - iY; $("#uploadBody").css({"left":oX<0?0:oX + "px", "top":oY<0?0:oY + "px"}); return false; } }; $(document).mouseup(function(e) { dragging = false; e.cancelBubble = true; }); } /** * 当文件选择对话框关闭消失时,如果选择的文件成功加入上传队列, * 那么针对每个成功加入的文件都会触发一次该事件(N个文件成功加入队列,就触发N次此事件)。 * @param {} file * id : string, // SWFUpload控制的文件的id,通过指定该id可启动此文件的上传、退出上传等 * index : number, // 文件在选定文件队列(包括出错、退出、排队的文件)中的索引,getFile可使用此索引 * name : string, // 文件名,不包括文件的路径。 * size : number, // 文件字节数 * type : string, // 客户端操作系统设置的文件类型 * creationdate : Date, // 文件的创建时间 * modificationdate : Date, // 文件的最后修改时间 * filestatus : number // 文件的当前状态,对应的状态代码可查看SWFUpload.FILE_STATUS */ // 关闭 /取消 按钮 事件 function iconClose(event){ if(typeof swfu != 'undefined' || swfu!=null){ swfu.destroy(); } $("#"+event.data.uploadBodyId).remove(); $(".ke-dialog-mask").remove(); insertAllStatus=true; } //全部清空 function clearUpload(){ $("div[id^='SWFUpload_']").each(function(i,obj){ deleteFile($(obj).attr('id')); }); } // 全部插入 function insertAllevent(){ //alert(swfu.getStats().successful_uploads);//successful_uploads $("img[data-status='0']").each(function(i,obj){ var showimg = new Image(); showimg.src=$(obj).attr("src"); var width = showimg.width; var height = showimg.height; var title=$(obj).attr("title"); var url=$(obj).attr("src"); //KE.plugin['multiimage'].insert("ArticleBody",url, title,width,height,"0",""); }); $("#iconClose").trigger("click"); } // 添加错误信息 function addErrorMsg(message,isFadeOut){ $("#"+swfu.customSettings.errorMsg_Id).empty().html(message); if(isFadeOut){ setTimeout(function () { $("#"+swfu.customSettings.errorMsg_Id).children().fadeOut(1000); },parseInt(swfu.customSettings.errorMsg_fadeOutTime)); } } //鼠标 移入 移出的 背景效果 function photoMouseOver(){ $(this).addClass("ke-on"); } function photoMouseOut(obj){ $(this).removeClass("ke-on"); } //swf 准备加载 为使用 function swfUploadPreLoad() { var self = this; var loading = function () { var longLoad = function () { document.getElementById("divLoadingContent").style.display = "none"; document.getElementById("divLongLoading").style.display = ""; }; this.customSettings.loadingTimeout = setTimeout(function () { longLoad.call(self) }, 15 * 1000 ); }; this.customSettings.loadingTimeout = setTimeout(function () { loading.call(self); }, 1*1000 ); } //swf 加载失败 function swfUploadLoadFailed() { //clearTimeout(this.customSettings.loadingTimeout); var message='<div id="divAlternateContent" style="background-color: #FFFF66; text-align:center;">' +'[url=http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash]<font color="red">请安装或者升级您的Flash插件!</font>[/url]</div>'; addErrorMsg(message,false); } //swf 加载 完成 function swfUploadLoaded() { //var self = this; //clearTimeout(this.customSettings.loadingTimeout); addErrorMsg("",false); $("#"+this.customSettings.btnUpload_ID).click(function (){swfu.startUpload()}); } //每次被加入 到列队中 function fileQueued(file){ addReadyFileInfo(file.id,file.name,"等待上传"); } //文件对话框选择完成 function fileDialogComplete(numFilesSelected, numFilesQueued) { try { if (numFilesQueued > 0) { $("#"+this.customSettings.clearAll_Id).bind("click",clearUpload); } if(this.settings.auto_upload){//是否要上传 this.startUpload(); } } catch (ex) { this.debug(ex); } } //都加入列队中 的错误信息 function fileQueueError(file, errorCode, message) { try { switch (errorCode) { case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: message = "<font color='red'>数量超过"+swfu.getSetting('file_upload_limit')+"张啦!</font>"; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: message = "<font color='red'>文件超过"+swfu.getSetting('file_size_limit')+"啦!</font>"; break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: message = "<font color='red'>文件不能为空哦!"; case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: message = "<font color='red'>文件格式只能为"+swfu.getSetting('fileTypes')+"!</font>"; break; default: message="<font color='red'>选择文件发生错误!"+"</font>"; return; } addErrorMsg(message,true); //addReadyFileInfo(file.id,file.name,"上传错误")+"</font>"; } catch (ex) { this.debug(ex); } } // 开始上传 function uploadStart(file){ $("#"+file.id).find(".ke-progressbar").css("display","block"); $("#"+file.id).find(".ke-message").css("display","none"); } // 上传的进度 function uploadProgress(file, bytesLoaded) { try { var percent = Math.ceil((bytesLoaded / file.size) * 100); if(percent>100){ percent=100; } var progress = new FileProgress(file); progress.setProgress(percent); if (percent === 100) { //progress.setStatus("建缩略图...");//正在创建缩略图... //progress.toggleCancel(false, this); }else { progress.setStatus("正在上传..."); progress.toggleCancel(true, this); } }catch (ex) { this.debug(ex); } } // 上传到服务器后 的放回信息 function uploadSuccess(file, serverData) { try { var progress = new FileProgress(file); var data = eval("(" + serverData + ")"); $("#"+file.id).find(".ke-img").attr("data-status",data.status); if (data.status == 0 || data.status == "0") { $("#"+file.id).find(".ke-img").attr("src",contextPath+data.message); progress.setStatus("上传成功"); progress.toggleCancel(); if(insertAllStatus){ if(swfu.getStats().successful_uploads>0){ $("#"+swfu.customSettings.insertAll_Id).bind("click",insertAllevent); } insertAllStatus=false; } return; }else if(data.status == 1 || data.status == "1"){ progress.setStatus("上传失败"); }else if(data.status == 2 || data.status == "2"){ progress.setStatus("格式不对"); }else if(data.status == 3 || data.status == "3"){ progress.setStatus("文件超大"); }else if(data.status == 4 || data.status == "4"){ progress.setStatus("文件为空"); }else if(data.status == 5 || data.status == "6"){ progress.setStatus("路径不对"); }else{ progress.setStatus("上传失败"); } progress.toggleCancel(false); } catch (ex) { this.debug(ex); } } // 选择文件后 添加到 操作层中 function addReadyFileInfo(fileid,fileName,message){ var photoDiv='<div class="ke-inline-block ke-item" id="'+fileid+'">' +'<div class="ke-inline-block ke-photo" style="height:80px; width:80px;">' +' [img]'+contextPath+'/images/image.png" class="ke-img" data-status="-1" width="80" height="80[/img]' +' <span class="ke-delete"></span>' +' <div class="ke-status">' +' <div class="ke-progressbar" style="display: none;">' +' <div class="ke-progressbar-bar">' +' <div class="ke-progressbar-bar-inner"></div>' +' </div>' +' <div class="ke-progressbar-percent">0%</div>' +' </div>' +' <div class="ke-message">'+message+'</div>' +' </div>' +' </div>' +' <div class="ke-name" alt="'+fileName+'">'+fileName+'</div>' +'</div>'; $("#"+swfu.customSettings.photoContainer_Id).append(photoDiv); $("#"+fileid).find(".ke-photo").bind("mouseover",photoMouseOver).bind("mouseout",photoMouseOut); $("#"+fileid).find(".ke-delete").bind("click",function(){deleteFile(fileid)}); } // 删除 单个文件 function deleteFile(fileId){ $("#"+fileId).remove(); swfu.cancelUpload(fileId,false); } // 单个 文件上传完 function uploadComplete(file) { try { /* I want the next upload to continue automatically so I'll call startUpload here */ if (this.getStats().files_queued > 0) { this.startUpload(); } } catch (ex) { this.debug(ex); } } //上传的错误 function uploadError(file, errorCode, message) { var message = "<font color='red'>文件上传出错!</font>"; var progress = new FileProgress(file); var flag=false; try { switch (errorCode) { case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED: progress.setStatus("取消上传"); progress.toggleCancel(false); break; case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED: progress.setStatus("停止上传"); progress.toggleCancel(true); case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: progress.setStatus("文件超大"); progress.toggleCancel(false); break; default: addErrorMsg(message,true); break; } //addFileInfo(file.id,imageName); } catch (ex3) { this.debug(ex3); } } // 根据 src 添加 图片 function addImage(src) { var newImg = document.createElement("img"); newImg.style.margin = "5px"; //document.getElementById("thumbnails").appendChild(newImg); if (newImg.filters) { try { newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0; } catch (e) { // If it is not set initially, the browser will throw an error. This will set it if it is not set yet. newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')'; } } else { newImg.style.opacity = 0; } newImg.onload = function () { fadeIn(newImg, 0); }; newImg.src = src; } function fadeIn(element, opacity) { var reduceOpacityBy = 5; var rate = 30; // 15 fps if (opacity < 100) { opacity += reduceOpacityBy; if (opacity > 100) { opacity = 100; } if (element.filters) { try { element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity; } catch (e) { // If it is not set initially, the browser will throw an error. This will set it if it is not set yet. element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')'; } } else { element.style.opacity = opacity / 100; } } if (opacity < 100) { setTimeout(function () { fadeIn(element, opacity); }, rate); } } /* ****************************************** * This event comes from the Queue Plugin * ****************************************** */ function queueComplete(numFilesUploaded) { //this.getStats().successful_uploads; } /* ****************************************** * FileProgress Object * Control object for displaying file info * ****************************************** */ function FileProgress(file) { var fileID = file.id; this.fileProgressWrapper = $("#"+file.id).find(".ke-status"); //document.getElementById(this.fileProgressID); if (!this.fileProgressWrapper) { fadeIn(this.fileProgressWrapper, 0); } } FileProgress.prototype.setProgress = function (percentage) { $(this.fileProgressWrapper).find(".ke-progressbar-bar-inner").css("width",percentage + "%"); $(this.fileProgressWrapper).find(".ke-progressbar-percent").text(percentage + "%"); }; FileProgress.prototype.setComplete = function () { $(this.fileProgressWrapper).find(".ke-progressbar-bar-inner").css("width",""); }; FileProgress.prototype.setCancelled = function () { $(this.fileProgressWrapper).find(".ke-progressbar-bar-inner").css("width",""); }; FileProgress.prototype.setStatus = function (status) { $(this.fileProgressWrapper).find(".ke-message").text(status); }; FileProgress.prototype.toggleCancel = function (show) { if(typeof show =='undefined'){ $(this.fileProgressWrapper).find(".ke-progressbar").css("display", "none"); $(this.fileProgressWrapper).find(".ke-message").css("display","none";) }else{ $(this.fileProgressWrapper).find(".ke-progressbar").css("display", show ? "block" : "none"); $(this.fileProgressWrapper).find(".ke-message").css("display", show ? "none" : "block"); } };
//处理 ie 9 的兼容性 找到这个方法 修改下就可以了
swfuplaod.js
// Private: getFlashHTML generates the object tag needed to embed the flash in to the document SWFUpload.prototype.getFlashHTML = function () { // Flash Satay object syntax: http://www.alistapart.com/articles/flashsatay var classid = ''; if (KindEditor.IE && KindEditor.V > 8) { classid = ' classid = "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"'; } return ['<object id="', this.movieName, '"' + classid + ' type="application/x-shockwave-flash" data="', this.settings.flash_url, '" width="', this.settings.button_width, '" height="', this.settings.button_height, '" class="swfupload">', '<param name="wmode" value="', this.settings.button_window_mode, '" />', '<param name="movie" value="', this.settings.flash_url, '" />', '<param name="quality" value="high" />', '<param name="menu" value="false" />', '<param name="allowScriptAccess" value="always" />', '<param name="flashvars" value="' + this.getFlashVars() + '" />', '</object>'].join(""); };
//简单的处理 文件上传
FileUploadServlet.java
package com.sh.common; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.text.SimpleDateFormat; import java.util.Iterator; import java.util.List; import java.util.UUID; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileItemFactory; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import com.sun.org.apache.xml.internal.security.exceptions.Base64DecodingException; import com.sun.org.apache.xml.internal.security.utils.Base64; public class FileUploadServlet extends HttpServlet { private static final int UPLOAD_SUCCSSS=0; // "上传文件成功!", private static final int UPLOAD_FAILURE=1; // "上传文件失败!"), private static final int UPLOAD_TYPE_ERROR=2; // "上传文件类型错误!"), private static final int UPLOAD_OVERSIZE=3; // "上传文件过大!"), private static final int UPLOAD_ZEROSIZE=4; // "上传文件为空!"), private static final int UPLOAD_NOTFOUND=5; // "上传文件路径错误!") public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html; charset=UTF-8"); PrintWriter out=response.getWriter(); String rootPath = request.getParameter("rootPath"); String param = request.getParameter("param"); if(rootPath == null) rootPath = ""; rootPath = rootPath.trim(); if(rootPath.equals("")){ rootPath = this.getServletContext().getRealPath(""); } //上传操作 FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("UTF-8"); try{ List items = upload.parseRequest(request); if(null != items){ Iterator itr = items.iterator(); while(itr.hasNext()){ FileItem item = (FileItem)itr.next(); if(item.isFormField()){ continue; }else{ //以当前精确到秒的日期为上传的文件的文件名 SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddkkmmss"); String path="/files"; File savedFile = new File(rootPath+path,item.getName()); item.write(savedFile); out.print("{status:"+this.UPLOAD_SUCCSSS+",message:'"+path+"/"+item.getName()+"'}"); } } } }catch(Exception e){ e.printStackTrace(); } } /** * new文件名= 时间 + 全球唯一编号 * @param fileName old文件名 * @return new文件名 */ private String generateFileName(String fileName) { String uuid=UUID.randomUUID().toString(); int position = fileName.lastIndexOf("."); String extension = fileName.substring(position); return uuid + extension; } }
评论
25 楼
wjiaoling136
2015-03-23
我想问一下,你这个火狐的问题怎么解决的啊?我自己弄得不兼容火狐,网上搜的办法根本解决不了。我也是用的Servlet。
24 楼
寒cc星哇哈哈
2015-01-23
Luob. 写道
wanghui9845 写道
问下我图片是上传成功了 就是没有提示和预览效果 服务器端的相应目录已经接收了
看看js 报错没有 ,如果JS错了,可能就没有效果了。
如果不行可以看看 最新版的 kindeditor-4.1.4 里面自带这个多图上传.
我也是这样,求破
23 楼
寒cc星哇哈哈
2015-01-23
虽然问题很久远。。。我想问一下附件是不是少了个包啊
22 楼
暂不存在
2015-01-16
楼主,这个上传多个文件是多次post提交吗?
21 楼
暂不存在
2015-01-16
楼主,请问怎么去掉上传文件为空的限制,好似只有在上传txt格式的空文件才会出错
20 楼
thx583164431
2014-12-08
国片在等待上传时可否预览
19 楼
Luob.
2014-11-17
wanghui9845 写道
问下我图片是上传成功了 就是没有提示和预览效果 服务器端的相应目录已经接收了
看看js 报错没有 ,如果JS错了,可能就没有效果了。
如果不行可以看看 最新版的 kindeditor-4.1.4 里面自带这个多图上传.
18 楼
wanghui9845
2014-11-17
问下我图片是上传成功了 就是没有提示和预览效果 服务器端的相应目录已经接收了
17 楼
zjqian908
2014-11-09
可以了,估计是我ie的缓存的原因。现在没问题了。就是用楼主的办法解决的。非常感谢。
16 楼
Luob.
2014-11-07
zjqian908 写道
楼主在?
我用了,但在ie9下不可用,即使使用了你的兼容性解决办法也是不可用。
使用原来的swfuplaod.js 文件,在ie9下不可用,但在ie9兼容视图下是可用。
期望楼主大神能有解决办法。
我用了,但在ie9下不可用,即使使用了你的兼容性解决办法也是不可用。
使用原来的swfuplaod.js 文件,在ie9下不可用,但在ie9兼容视图下是可用。
期望楼主大神能有解决办法。
@你去下载一个最新版的 kindeditor-4.1.4 里面自带这个多图上传
至于你说的ie9 这个我肯定也是测试过了的
15 楼
zjqian908
2014-11-06
楼主在?
我用了,但在ie9下不可用,即使使用了你的兼容性解决办法也是不可用。
使用原来的swfuplaod.js 文件,在ie9下不可用,但在ie9兼容视图下是可用。
期望楼主大神能有解决办法。
我用了,但在ie9下不可用,即使使用了你的兼容性解决办法也是不可用。
使用原来的swfuplaod.js 文件,在ie9下不可用,但在ie9兼容视图下是可用。
期望楼主大神能有解决办法。
14 楼
nobody365
2014-10-28
好东西,谢谢啦。。。。。。。
13 楼
ridn_jache
2014-09-05
不错先收了!
12 楼
xiaoyu123
2014-07-04
11 楼
fancy205
2014-06-24
楼主,用你的附件搭起来后,IE9出不来效果啊。求教
10 楼
chengcheng222e
2014-01-15
有V 3.5吗?
9 楼
lijybhj
2013-03-14
谢谢,,正需要,,拿来学习学习
8 楼
Fox_ed
2013-03-05
Luob. 写道
Fox_ed 写道
请问一下,你的那个全部插入的按钮的主要作用是什么呢?当点击开始上传以后,文件就开始上传到服务器了,然后点击全部插入,感觉没什么作用,能给解释一下吗?为谢了。
那个 "全部上传" 是将 上传的图片插入到一个输入控件中, 作为 一条评论 或者 回复 发送出去.
里面的功能 是从
"kindeditor-4.1.4 " 截取出来的,有时间你可以研究下,
我当初 主要是在" kindeditor-3.5" 添加这样一个功能.(我们网站用的3.5版本的)
谢谢!
7 楼
Luob.
2013-03-04
Fox_ed 写道
请问一下,你的那个全部插入的按钮的主要作用是什么呢?当点击开始上传以后,文件就开始上传到服务器了,然后点击全部插入,感觉没什么作用,能给解释一下吗?为谢了。
那个 "全部上传" 是将 上传的图片插入到一个输入控件中, 作为 一条评论 或者 回复 发送出去.
里面的功能 是从
"kindeditor-4.1.4 " 截取出来的,有时间你可以研究下,
我当初 主要是在" kindeditor-3.5" 添加这样一个功能.(我们网站用的3.5版本的)
6 楼
Fox_ed
2013-03-04
请问一下,你的那个全部插入的按钮的主要作用是什么呢?当点击开始上传以后,文件就开始上传到服务器了,然后点击全部插入,感觉没什么作用,能给解释一下吗?为谢了。
相关推荐
**jQuery + SWFUpload + Servlet 多文件上传技术详解** 在Web开发中,用户往往需要上传多个文件,例如图片、文档等。传统的HTML表单上传方式存在诸多限制,如文件大小限制、一次只能上传一个文件等。为了克服这些...
这里我们将深入探讨SwfUpload与Servlet结合实现图片上传的相关知识点。 1. **SwfUpload组件介绍** SwfUpload 是一个JavaScript库,它通过Flash插件在后台处理文件上传。其优点在于能够在不刷新页面的情况下进行...
标题中的“SWFUpload+COS 上传组件+servelet 实现大附件上传”是指使用SWFUpload这款JavaScript库,结合腾讯云对象存储服务(COS)以及Servlet技术,来实现大文件的分片上传功能。这是一个常见的Web应用上传方案,...
SwfUpload是一个强大的JavaScript库,它允许用户在网页上实现多文件上传功能,尤其适合大文件上传。这个项目集成了JSP、Servlet和Tomcat服务器,提供了完整的开发环境,无需额外配置,方便开发者快速实现文件上传...
Java中的SWFUpload是一种流行的文件上传工具,尤其适用于处理图片和文件的批量上传。这个工具在Web开发中被广泛使用,因为它提供了用户友好的界面和高效的数据传输能力。SWFUpload是一个基于Flash的组件,它允许用户...
SwfUpload 和 FancyUpload 是两种流行的JavaScript库,用于在Web应用程序中实现文件上传功能,尤其适用于需要处理大量或大文件的场景。这两个Java项目提供了完整的实现,可以在Eclipse环境中进行测试,确保了与...
SWFUpload是一个开源的JavaScript库,它允许网页在Flash的支持下实现高级的文件上传功能,包括多文件选择、进度条显示、预览等。在Web开发中,尤其是在处理大量图片或者文档上传时,SWFUpload提供了高效且用户体验...
通过以上介绍,我们可以看出"SWFUpload批量上传图片"项目是一个实用的工具,可以帮助开发者快速实现批量图片上传功能。结合MyEclipse的强大开发环境,可以更便捷地进行项目开发和调试,提升开发效率。在实际应用中,...
在这个项目中,结合SWFUpload 3.5版本和Servlet,我们可以构建一个支持多图片上传的功能。 1. **SWFUpload 简介**: - SWFUpload 是一个基于Flash的文件上传组件,它在后台使用JavaScript与前端的Flash交互。 - ...
SwfUpload是一款经典的JavaScript库,专门用于实现网页上的文件,特别是图片的批量上传功能。它通过Flash技术提供了一种在不刷新页面的情况下上传多张图片的解决方案,这在用户体验上有着显著的优势,因为它允许用户...
SWFUpload 是一个流行的JavaScript库,它允许在网页上实现复杂的文件上传功能,尤其适用于大文件上传和多文件批量上传。这个库利用Adobe Flash技术来提供用户友好的界面,同时通过JavaScript与后端服务器进行交互。...
本文将详细讲解如何使用Java配合SWFUPLOAD组件实现多文件的异步上传。 首先,让我们理解一下SWFUPLOAD组件。SWFUPLOAD是一款开源的JavaScript和Flash混合的文件上传工具,它允许用户在不刷新页面的情况下实现多文件...
总结,这个"swfupload多文件上传带进度条javaweb项目"提供了完整的文件上传解决方案,结合SwfUpload的强大力量,可以轻松实现批量文件上传并显示进度,对于开发高效、友好的Web应用具有很高的参考价值。通过深入研究...
本示例将探讨如何在JSP页面中集成SwfUpload,并实现多图片上传的功能。 一、SwfUpload简介 SwfUpload是一款基于Flash的文件上传插件,它允许在不刷新页面的情况下实现文件上传,提供了多种自定义选项,如文件类型...
SWFUpload是一个强大的JavaScript文件上传组件,它与Java后端结合使用,可以提供高效、用户友好的多文件上传功能。这个插件最初是基于Flash技术,因此在支持Flash的浏览器中运行良好。以下是对SWFUpload及其与jQuery...
SWFUpload是一个JavaScript库,它允许用户通过Flash技术实现多文件无刷新上传。这个功能在网页应用中非常有用,因为它提供了友好的用户体验,用户可以选择多个文件,并在后台逐一上传,无需等待每个文件上传完成后再...
SwfUpload 是一个开源的JavaScript库,主要用于在Web应用程序中实现多文件上传功能。它结合了Flash技术,能够在不离开当前页面的情况下实现文件的异步上传,提供了友好的用户界面和高效的上传性能。在Java环境下,...
1. 批量上传:SWFUpload 支持一次选择并上传多个文件,极大地提高了用户上传效率。 2. 预览功能:用户在上传前可以预览选定的文件,确保上传的是正确的内容。 3. 文件类型过滤:开发者可以通过配置限制可上传的文件...
下面我们将详细介绍SWFUpload在JSP中的应用以及其多文件上传的实现方式。 首先,SWFUpload的核心特性在于它可以在不刷新页面的情况下,通过Flash技术实现文件的异步上传。这使得用户能够在上传大文件时依然保持页面...
- **多文件上传**:用户可以一次选择多个文件进行上传,非常适合图片上传场景。 2. **图片预览** - **前端预览**:使用HTML5的`FileReader` API,可以读取文件内容并将其转化为base64编码的字符串,然后在img标签...