这个插件简单好用,下面进入正题:
1.引入js和css
<link rel="stylesheet" type="text/css" href="css/uploadify.css">
<script type="text/javascript" src="js/jquery.uploadify.min.js"></script>
2.js代码
$("#uploadify1")
.uploadify(
{
'uploader' : '${remoteURL}/informationManager/uploadFeedImgMultipart',//后台处理的请求
'swf' : '${remoteURL}/static/uploadify/uploadify.swf',
'cancelImg' : '${remoteURL}/static/uploadify/cancel.png',
'buttonImg' : 'uploadify/buttonImg.png',
'queueID' : 'fileQueue',
'fileDataName' : "files",
'buttonText' : '上传',
'fileObjName' : 'files',
'auto' : false,
'multi' : true,
'simUploadLimit' : 999,
'simUploadLimit' : 3,
'fileExt' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;*.flv',
'fileDesc' : '图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',
'onUploadStart' : function(file) {
$("#uploadify1").uploadify("settings", "formData", { 'type': 2});
//在onUploadStart事件中,也就是上传之前,把参数写好传递到后台。
},
onUploadSuccess : function(file, data, response) {
var json = eval('(' + data + ')');
var feedAttachIds = $("#feedAttachIds").val();
feedAttachIds += json.feedAttachId + ":";
var trs = [];
trs
.push('<li id="'+json.feedAttachId+'" class="span2">');
trs.push('<a href="#" class="thumbnail">');
trs
.push('<img src="${remoteURL}'+json.urlPath+'" alt="" />');
trs.push('</a>');
trs.push('<div class="actions">');
trs
.push('<a title="" href="www.hao123.com"><i class="icon-pencil icon-white"></i></a>');
trs
.push('<a title="" onClick="removeAttach('
+ json.feedAttachId+ ')" href="#"><i class="icon-remove icon-white"></i></a>');
trs.push('</div>');
trs.push('</li>');
$("#showDiv").append(trs.join(""));
$("#feedAttachIds").val(feedAttachIds);
},
});
});
3. html 代码
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<a href="javascript:$('#uploadify1').uploadify('upload','*')">开始上传</a>|
<a href="javascript:$('#uploadify1').uploadify('cancel','*')">取消上传</a>
</div>
</div>
<div class="control-group" id="fileQueue" style="width: 700px; height: 100px; border: 0px solid blue;"></div>
4.java代码
@RequestMapping(value = "/uploadFeedImgMultipart", method = RequestMethod.POST)
public void upload(@RequestParam("files") MultipartFile[] files)
throws Exception {
MessageInfo messageInfo = new MessageInfo();
for (int i = 0; i < files.length; i++) {
Map<String, String> map = new HashMap<String, String>();
Long fileSize = files[i].getSize();
String name = files[i].getOriginalFilename();
String path = request.getSession().getServletContext().getRealPath("/")+ "/uploads/feed/image/";
System.out.println("path-----------:"+path);
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
path += ymd + "/";
File servletFile = new File(path);
if (!servletFile.exists()) {
try {
servletFile.mkdirs();
} catch (Exception e) {
e.printStackTrace();
}
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String url = df.format(new Date()) + new Random().nextInt(1000)+ "_" + name;
FileUtil.createFile(files[i], path + "/" + url);
map.put("filePath", "/uploads/feed/image/" + ymd + "/" + url);
map.put("fileSize", String.valueOf(fileSize));
map.put("fileName", name);
map.put("code", "image");
super.responseJson(response, messageInfo);
}
5.注意:
queueID的值要和下面的div ID一致(本文是fileQueue
)