uploadify simple example(jsp)

a simple example of uploadify, which is a javascript upload tool.

1. download it

http://www.uploadify.com/

2. import to jsp(jquery is also needed, or use libraries contains it.)

<link href=”/uploadfy/uploadify.css” rel=”stylesheet” type=”text/css” />

<script src=”/uploadfy/jquery.uploadify.js”></script>

3. add an input element and a div which will contain select files

<input type=”file” id=”formfile” name=”files” ></input>
<div id=’fileQueue’></div>

4. add a submit button if u don’t want uploadify automatically upload after select a file, if auto upload, you don’t need this.

<a href=”javascript:void()” class=”easyui-linkbutton” iconCls=”icon-save” onclick=”javascript:$(‘#formfile’).uploadify(‘upload’)”>保存</a>

5.write js code for uploadify

$(function(){
$(‘#formfile’).uploadify({
‘auto’:false,
‘fileObjName’:’files’,
‘formData’ : {
‘pubdate’:$(‘#formdate’).datetimebox(‘getValue’),
‘station’:$(‘#formtype’).combobox(‘getValue’)
},
‘swf’:’/WebReport/uploadfy/uploadify.swf’,
‘uploader’:'<c:url value=”/nnmis/view/yjzh/addYjlx.tg”/>’,
‘progress’ : ‘percentage’,
‘removeCompleted’ : true,
‘removeTimeout’:2,
‘multi’ : true,
‘progress’ : ‘percentage’,
‘queueID’ : ‘fileQueue’,
‘onUploadSuccess’: function(file,data,response){
var rt = eval(‘(‘+data+’)’);
if(rt.success){
$.messager.show(
{
title:’提示’,
msg:’操作成功!’,
showType:’slide’
}
);
//$(‘#dlg’).dialog(‘close’);
$(‘#dg’).datagrid(‘reload’);
}else{
var msg =’操作失败!’;
if(rt.message){
msg=rt.message;
}
$.messager.alert(‘info’,msg,’error’);
}
},
‘onUploadStart’:function(){
if($(‘#formtype’).combobox(‘getValue’)==null||$(‘#formtype’).combobox(‘getValue’)==”){
$.messager.alert(‘info’,’请选择所属站!’,’error’);
$(“#formfile”).uploadify(‘stop’);
}else{
var pubdate = $(‘#formdate’).datetimebox(‘getValue’);
var station = $(‘#formtype’).combobox(‘getValue’);
$(“#formfile”).uploadify(“settings”, “formData”, {‘pubdate’:pubdate,’station’:station});
}
}
});
})

6. add setting into struts file

<action name=”*FJ” method=”{1}” class=”ddrz.XhgzUploadFileControl”>
<result type=”stream” name=”success”>
<param name=”contentType”>application/octet-stream</param>
<param name=”contentDisposition”>attachment;fileName=”${fileName}”</param>
<!– 有相对应的getDownloadFile()方法返回值是 InputStream –>
<param name=”inputName”>downloadFile</param>
<param name=”bufferSize”>4096</param>
</result>
</action>

7. write action to handle the upload

private String pubdate;
private String equtype;
private List<File> files;
private List<String> filesFileName;

public void add(){
try {
String person = request.getSession().getAttribute(“session_personid”).toString();
String username = request.getSession().getAttribute(“fr_username”).toString();
String org = request.getSession().getAttribute(“session_orgid”).toString();
String serverDir = ServletActionContext.getServletContext().getRealPath(“/”);
System.out.println(pubdate);
System.out.println(equtype);
if (equtype == null || equtype.isEmpty()) {
throw new Exception(“请选择设备类型!”);
}
if (files != null) {
String origin = “”;
String format = “”;
String savename = “”;
String savePath = “”;
File ofile = null;
for (int i = 0; i < files.size(); i++) {
ofile = files.get(i);
origin = filesFileName.get(i);
format = origin.substring(origin.lastIndexOf(“.”));
savename = UUID.randomUUID().toString() + format;
savePath = serverDir + “cloudFiles\\” + username + “\\” + savename;
model = new YjlcModel();
model.setYjlcid(UUID.randomUUID().toString());
model.setCloudfileid(UUID.randomUUID().toString());
model.setPersonid(person);
model.setName(origin);
model.setFileName(origin);
model.setOrgid(org);
model.setPubdate(pubdate);
model.setEqutype(equtype);
model.setPath(“cloudFiles/” + username + “/” + savename);
model.setSize(ofile.length());
File saveFile = new File(savePath);
FileUtils.copyFile(ofile, saveFile);
yjlcdao.save(model);
}
}
outJsonPlainString(response, “{\”success\”:true,\”message\”:\”发布成功!\”}”);
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
logger.error(e.getMessage());
outJsonPlainString(response, “{\”success\”:false,\”message\”:\”” + e.getMessage() + “\”}”);
}
}

8. simply:

Snap1

This entry was posted in Computer, Java. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s