struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

最新推荐文章于 2021-11-21 16:07:22 发布

lisa890608

最新推荐文章于 2021-11-21 16:07:22 发布

阅读量5.7k

点赞数

分类专栏： jQuery js

js 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

本文介绍了一种结合jQuery和uploadify插件实现网页中图片上传功能的方法，并实现了图片列表的拖拽排序功能。具体展示了如何配置uploadify参数、处理上传错误及成功响应、以及如何通过AJAX提交已上传图片的URL。

摘要由CSDN通过智能技术生成

js 代码

[html] view plain copy

<script type="text/javascript">
$(function() {
$( "#pics" ).sortable();
//$( ".wraps" ).disableSelection();
$("#uploadFile").uploadify({
height : 30,
swf : '${baseURL}/themes/default/images/uploadify.swf',
uploader : '${baseURL}/movieMan/movieManAction!upload.action?savePath=upload',
width : 120,
fileObjName:'uploadify',
'auto' : false,
'buttonText' : '选择文件' ,
'multi': true,
'queueID' : 'some_file_queue',
//允许上传的文件后缀
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',
//上传文件的大小限制
'fileSizeLimit':'1MB',
//上传数量
'queueSizeLimit' : 5,
'onUploadSuccess' : function(file, data, response) {
//$.parseJSON(json)
// alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
var html = "<li><div style='position: relative;'> <img src=${baseURL}/"+data+" name='mvUrl' width='100px' height='80px' class='myimg'/><div class='del ui-icon-closethick ui-icon' >删除</div></div></li>";
$("#pics").append(html);
},
'onFallback':function(){
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
onSelectError:function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#uploadFile').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#uploadFile').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常！");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确！");
break;
}
}
});
$(".del").die().live('click',function(){
$(this).parent().parent().remove();
});
$(".preview").live({ mouseenter: function () {
var src = $(this).parent().find("input").val();
src = "${baseURL}/"+src;
$("#testimg").attr("src",src);
var left = $(this).position().left;
var top = $(this).position().top;
$("#imgf").css({left:left,top:top});
$("#imgf").show();
}, mouseleave: function () {
$("#imgf").hide();
}
});
});
function dosubmint(){
$(".mvurl").remove();
$(".myimg").each(function(){
var d=$(this).attr("src");
d = d.replace('${baseURL}/',"");
d = "<input type='hidden' name='mvUrl' class='mvurl' value="+d+">";
$("#form1").append(d);
});
$("#form1").ajaxSubmit({
type: 'post',
dataType: 'json',
success: function(data){
alert(data.desc);
},
error: function(XmlHttpRequest, textStatus, errorThrown){
alert( "error");
}
});
}
</script>

html 代码

[html] view plain copy

body {
font-size: 12px;
}
.wraps {
clear: both;
}
.wraps input {
width: 300px
}
.preview,.del {
cursor: pointer;
text-indent: -99999px;
float: left;
margin-left: 20px
}
.del{position: absolute;top: 0;right: 0;background-color: white;}
ul li{list-style: none}
#pics{padding: 10px;border: 1px solid #ccc;height: 200px}
#pics li{float: left;display: block;width: 100px;height: 80px;padding: 2px;border: 1px solid #ccc; margin: 10px;}
</style>
<body>
<div id="some_file_queue"></div>
<div id="imgf" style="display: none; position: absolute; z-index: 9999">
<img id="testimg">
</div>
<input type="file" name="uploadifys" id="uploadFile" />
<br />
<form action="${baseURL}/movieMan/movieManAction!savepics.action?id=${param.id}&fileUrlType=0" id="form1" dataSrc="${baseURL}/movieMan/movieManAction!getPics.action?id=${param.id}&fileUrlType=0">
<ul id="pics" >
<!--
<li class='wraps' name="list"><input type='text' name='mvUrl' style='float: left;' /><span class='preview ui-icon ui-icon-newwin' >预览</span><span class='del ui-icon-closethick ui-icon'>删除</span></li>
-->
<li name="list">
<div style="position: relative;">
<img src="${baseURL }/" name="mvUrl" width="100px" height="80px" class="myimg"/>
<div class='del ui-icon-closethick ui-icon' style="position: absolute;top: 0;right: 0;background-color: white;">删除</div>
</div>
</li>
</ul>
</form>
<div style="clear: both;margin-top: 20px">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" onclick="javascript:$('#uploadFile').uploadify('upload','*')">
<span class="ui-button-icon-primary ui-icon ui-icon-play"></span> <span class="ui-button-text">开始上传</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" onclick="javascript:$('#uploadFile').uploadify('cancel','*')">
<span class="ui-button-icon-primary ui-icon ui-icon-cancel"></span> <span class="ui-button-text">取消上传</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" onclick="dosubmint()">
<span class="ui-button-icon-primary ui-icon ui-icon-locked"></span> <span class="ui-button-text">保存提交</span>
</button>
</div>
</body>

struts action 代码

[java] view plain copy

private List<File> uploadify; //对应js里面的fileObjName，而不是input type ="text" 里面的name值
private List<String> uploadifyFileName;
private String savePath;//文件上传后保存的路径
private List<String> mvUrl;
private Integer fileUrlType;

以上属性需提供geter，setter 方法

[java] view plain copy

public void upload() throws Exception {
File dir=new File(getSavePath());
if(!dir.exists()){
dir.mkdirs();
}
List<String> mfiles = new ArrayList<String>();
for(int i=0;i<uploadify.size();i++){
String fileName = DateUtil.format(new Date(), "yyyyMMddHHmmss")+"_"+uploadifyFileName.get(i);
String dest = getSavePath()+"/"+fileName;
FileUtils.copyFile(uploadify.get(i), new File(dest));
mfiles.add(savePath+"/"+fileName);
}
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.write(mfiles.get(0));
out.close();
out.flush();
}