关于Struts中Jquery上传组件uploadify用法
1.JS
<script type="text/javascript" src="${ ctx }/widgets/upload/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="${ ctx }/widgets/upload/swfobject.js"></script>
<script type="text/javascript" src="${ ctx }/widgets/upload/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#uploadify").uploadify({
'uploader' : '${ ctx }/widgets/upload/uploadify.swf',
'script' : '${ ctx }/uploadfile.do?method=upload',
'scriptData' : {'type':'clientproduct'},
'method' : 'post',
'cancelImg' : '${ ctx }/styles/images/delete.gif',
'buttonImg' : '${ ctx }/widgets/upload/xzButton.gif',
'folder' : '/upload/img',
'queueID' : 'fileQueue',
'auto' : false,
'width' : 90,
'height' : 20,
'sizeLimit' : 3*1024*1024,
'multi' : true,
'wmode' : 'transparent',
'simUploadLimit' : 999,
'fileExt' : '*.png;*.doc;*.gif;*.jpg;*.bmp;*.jpeg;*.docx;*.txt;*.pdf',
'fileDesc' : '图片文件(*.png;*.doc;*.gif;*.jpg;*.bmp;*.jpeg;*.docx;*.txt;*.pdf)',
'onSelectOnce' : function(event,data,data)
{
filesSelected:true;
},
'onComplete' : function(event,queueId,fileObj,response,data)
{
//alert("response="+response);
setImg2product($.trim(response),$('#ttype').val())
},
'onAllComplete' : function(event,data)
{
if($.trim($('#ttype').val())==""){
$('#result').html('没有选择添加文件类型，请重新上传!');
}else{
$('#result').html(data.filesUploaded +'个文件上传成功');
}
}
});
});
function shun(){
if($.trim($('#ttype').val())==""){
alert("请先选择添加文件类型!");
}else{
$('#uploadify').uploadifyUpload();
}
}
function setImg2product(dpID,type){//绑定产品与图片
var clinentproductID = $("*[name='id']").val();
$.ajax({
type : "post",
method : "post",
dataType : "json",
data:{
"clinentproductID":clinentproductID,
"dpID":dpID,"type":type
},
url : "clientdieplate.do?method=saveInfo",
success : function(data) {
showImg(type);
}
});
}
function showImg(type){//显示文件
var clinentproductID = $("*[name='id']").val();
$.ajax({
type : "post",
method : "post",
dataType : "json",
data:{
"clinentproductID":clinentproductID,"type":type
},
url : "clientdieplate.do?method=getInfoByclientproductID",
success : function(data) {
if($.trim(data.type)=="dieplate"){
$('#dieplantShow').html(data.dieplantShow);
}else if($.trim(data.type)=="certification"){
$('#certificationShow').html(data.certificationShow);
}else if($.trim(data.type)=="colorbox"){
$('#colorboxShow').html(data.colorboxShow);
}else if($.trim(data.type)=="boxmark"){
$('#boxmarkShow').html(data.boxmarkShow);
}else if($.trim(data.type)=="screwpack"){
$('#screwpackShow').html(data.screwpackShow);
}else if($.trim(data.type)=="serialno"){
$('#serialnoShow').html(data.serialnoShow);
}else if($.trim(data.type)=="product"){
$('#productShow').html(data.productShow);
}else if($.trim(data.type)=="other"){
$('#otherShow').html(data.otherShow);
}else if($.trim(data.type)=="productinfo"){
$('#productinfoShow').html(data.productinfoShow);
}else if($.trim(data.type)=="specification"){
$('#specificationShow').html(data.specificationShow);
}
}
});
}
function fnDeleteDiePlate(fileID,type){//文件删除
//var text;
//if(type=="specification" || type=="productinfo"){
// text = "您是否要删除该文件？";
//}else{
// text = "您是否要删除该图片？";
//}
//if(window.confirm(text)){
$.ajax({
type : "post",
method : "post",
dataType : "json",
data:{
"dpid":fileID,"type":type
},
url : "clientdieplate.do?method=deleteInfo",
success : function(data) {
showImg(data.type);
}
});
//}
}
function fnDowmloadFile(fileID){//文件下载
$.ajax({
type : "post",
method : "post",
dataType : "json",
data:{
"fileID":fileID
},
url : "../uploadfile.do?method=downloadFile"
});
}
</script>
2.Action方法
/**
* Description:文件上传
* @author 李仕亮
*/
@SuppressWarnings("unchecked")
private Map<String,String> uploadFile(LazyValidatorForm uploadfileForm, HttpServletRequest request) throws FileNotFoundException, IOException {
//检查并创建上传目录
String filepath = "upload//" + PowerConstant.UPLOAD_IMG_PATH;
String dirPath = request.getSession().getServletContext().getRealPath("/") + filepath;// 图片上传路径request.getRealPath("/")
FileOperateUtil.creatDirs(dirPath);
//取得一个文件
Hashtable<String, FormFile> fileHashtable = uploadfileForm.getMultipartRequestHandler().getFileElements();
Enumeration<String> enumeration = fileHashtable.keys();
enumeration.hasMoreElements();
String key = (String) enumeration.nextElement();
FormFile formFile = (FormFile)fileHashtable.get(key);
String rename = UUID.randomUUID().toString();//防止命名重复，产生相应的异常
String filename = formFile.getFileName().trim(); //文件名
String filetype = filename.substring(filename.lastIndexOf(".") + 1);//文件类型
String realPath = dirPath + "//" + rename + "." + filetype; //真实文件路径
String contentType = formFile.getContentType();
String filesize = FileSizeConvert.convert(formFile.getFileSize()); //文件大小
Map<String,String> fileMap = null;
if (!filename.equals("")) {
// 在这里上传文件
//System.out.println(rename + "." + filetype);
//System.out.println("---------------------------------------------");
InputStream is = formFile.getInputStream();
OutputStream os = new FileOutputStream(realPath);
int bytesRead = 0;
byte[] buffer = new byte[8192];
while ((bytesRead = is.read(buffer, 0, 8192)) != -1) {
os.write(buffer, 0, bytesRead);
}
os.close();
is.close();
// 将此文件的信息作为参数预先保存，最后存入数据库中
fileMap =new HashMap<String,String>();
fileMap.put("filename", filename);
fileMap.put("filepath", filepath + "//" + rename + "." + filetype);
fileMap.put("filetype", contentType);
fileMap.put("filesize", filesize);
}
return fileMap;
}
/**
* Description:文件上传
* @author 李仕亮
* @throws MapperException
*/
@SuppressWarnings("unchecked")
public ActionForward upload(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws IOException, ServletException, MapperException {
LazyValidatorForm uploadForm = (LazyValidatorForm) form;
String type = request.getParameter("type");
//log.info("type="+type);
Map<String,String> fileMap = uploadFile(uploadForm, request);
if("clientproduct".equals(type)){//上传客户产品相关图片
if(fileMap!=null){
response.setContentType("text/html; charset=utf-8");
Uploadfile file = uploadfileManager.saveUpLoad(fileMap);
PrintWriter out=response.getWriter();
out.println(file.getId());
}
}else {
if(fileMap!=null){
Uploadfile file = uploadfileManager.saveUpLoad(fileMap);
Map<String, Object> resultJSON = new HashMap<String, Object>();
resultJSON.put("file", file);
response.setContentType("text/plain;charset=UTF-8");
super.renderHtml(response, JSONMapper.toJSON(resultJSON).render(false));
}
}
return null;
}
public PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
return response.getWriter();
}
/**
* 文件下载
*/
@SuppressWarnings("unused")
public ActionForward downloadFile(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
// 存入下载记录
String fileID = request.getParameter("fileID");
Uploadfile uploadFile = uploadfileManager.get(fileID);
// 跳转到下载页面
request.setAttribute("filePath", request.getSession().getServletContext().getRealPath("/") + uploadFile.getPath());
request.setAttribute("fileName", uploadFile.getName());
request.setAttribute("contentType", uploadFile.getType());
return new ActionForward("/download.do");
}
3.
jsp代码
<table style="width: 90%;">
<tr>
<td style="width:108px;">
<select name="ttype" id="ttype" style="height:20px;">
<option value="">--请选择--</option>
<c:if test="${productprice.hidecpinfo!=1 }">
<option value="product">添加产品图片</option>
<option value="certification">添加LOGO和标签图</option>
<option value="colorbox">添加彩盒图</option>
<option value="screwpack">添加螺丝包及配件图</option>
<option value="boxmark">添加外箱唛头图</option>
<option value="serialno">添加条形码\序列号图</option>
<option value="other">添加其他图片</option>
<option value="specification">添加产品说明书</option>
<option value="dieplate">添加客户产品刀版</option>
</c:if>
<option value="productinfo">添加产品关键数据信息表</option>
</select>
<input type="hidden" name="type" id="type" value=""/>
</td>
<td style="width: 10px;">
</td>
<td style="width: 80px;">
<input type="file" name="uploadify" id="uploadify" />
</td>
<td align="left">
<a href="javascript:;" onclick="shun();">开始上传</a>|
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消上传</a>
<span id="result" style="font-size: 13px;color: red"></span>
</td>
</tr>
</table>
<div id="fileQueue" style="width: 500px;height: 150px;border: 2px solid green;overflow: scroll"></div>
- UploadFIle.rar (321.4 KB)
- 下载次数: 762
顶
踩
发表评论
相关推荐
在"struts2+jquery.uploadify实现上传下载"的场景中，我们主要关注以下几个关键知识点： 1. **Struts2上传**：Struts2通过Interceptor（拦截器）机制实现了文件上传功能。默认情况下，Struts2配置了一个名为`params...
这个简单的demo展示了如何在Struts2应用中集成jQuery Uploadify，以便提供用户友好的、多文件异步上传体验。下面我们将深入探讨这个知识点。 首先，我们来了解jQuery Uploadify。Uploadify是一个基于jQuery的插件，...
在实际应用中，为了提高用户体验，经常需要处理文件上传功能，这时结合jQuery与uploadify插件可以实现高效、美观的文件上传效果。下面将详细探讨Struts2结合jQuery.uploadify插件的应用。 首先，jQuery.uploadify是...
### 在Struts2中使用Uploadify组件上传文件 #### 一、Uploadify简介与特性 Uploadify是一款基于jQuery的文件上传插件，以其强大的功能和优秀的用户体验受到开发者们的青睐。它利用Flash技术实现异步文件上传，使得...
这个完整的工程提供了一个很好的示例，展示了如何在实际项目中集成jQuery Uploadify 3.2和Struts2，实现高效的文件上传功能。通过学习和理解这个工程，开发者可以更好地运用这些技术来优化自己的Web应用程序。
综上所述，使用jQuery的uploadify插件实现文件上传涉及了jQuery库的使用、uploadify插件的配置、Struts2框架的集成以及Java后端的文件处理。在实际开发中，可以根据项目需求对这些步骤进行调整和优化，以实现更高效...
在IT行业中，jQuery Uploadify是一款广泛使用的前端文件上传插件，它可以实现异步批量上传，大大提升了用户体验。本文将深入探讨如何将jQuery Uploadify与Java后端框架Struts2进行整合，以实现在Web项目中的文件上传...
在IT行业中，前端开发经常会遇到文件上传的需求，而"jquery-java-ajax-uploadify上传文件"是一个经典的方法，结合了JavaScript库jQuery、Ajax技术以及Uploadify插件来实现这一功能。在这个过程中，我们将深入探讨...
Struts2和jQuery Uploadify是两个在Web开发中常见的组件，它们主要用于实现用户界面的文件上传功能。在本文中，我们将深入探讨这两个组件的工作原理、如何集成以及它们在实际项目中的应用。 首先，Struts2是一款...
通过以上步骤，我们就成功地实现了在Struts2中使用Uploadify3.2进行多文件、超大文件的上传，并带有进度条显示的功能。这不仅提升了用户体验，还解决了大文件上传可能导致的问题。记得在实际应用中，还要考虑文件...
在项目中，可能使用jQuery库（包括uploadify插件）来处理文件上传，实现无刷新的文件上传过程。Dialog弹框可能是基于jQuery UI或自定义的JavaScript组件，用于提示用户信息或者进行交互。 5. **Uploadify上传插件**...