Java Web中使用Uplodify进行文件上传

说在前面的话

1、 uplodify为前段显示进度，不用重复调后台查询上传进度，提高效率。

2、使用uplodify一定要看官方的api，一定要对应版本，因为这个东西版本间差异太大了，没少被它坑！

3、这个东西相比使用commons-fileupload 监听器，使用起来简单多了。http://blog.itpub.net/30066956/viewspace-1773697/

使用步骤

1、去这个网站下载http://www.uploadify.com ，我项目中未使用html，所以下载的Flash Version 解压后是这个样子。目前最近版本为：v3.2.1

2、把如上标记的文件加入到项目中。

3、注意修改uploadify.css中取消图标的对应关系（uploadify-cancel.png）

4、页面中加如两个元素，很简单：如下，注意id名称 datafileQueue datauploadify .这个在后面会用到。

点击(此处)折叠或打开

<div class="content">
<table border="0" cellspacing="1" cellpadding="0" width="100%" class="tk_table">
<tr>
<td>数据名称：</td>
<td><input id="fileName" name="fileName" type="text" class="tk-text" /></td>
</tr>
<tr>
<td>文件上传：</td>
<td>
<div id="datafileQueue"></div>
<input type="file" name="datauploadify" id="datauploadify" /></td>
</tr>
<tr>
<td>数据类型：</td>
<td><select id="datatype" name="dataFileTypeId" class="tk-text"><option>请选择</option></select></td>
</tr>
<tr>
<td>描述：</td>
<td><textarea id="description" name="description" class="textarea_size"></textarea></td>
</tr>
</table>
</div>
<div class="bottombtn">
<table width="40%" class="btntalbe">
<tr>
<td align="center">
<input id="btnOk" type="button" value="确定" class="tkbtn surebt" onclick="uploadData()"/></td>
<td align="center">
<input type="button" class="closeB tkbtn" value="取消" /></td>
</tr>
</table>
</div>

5、页面初始化时要初始化uploadify，如果用jquery的话，写到ready中。如下

点击(此处)折叠或打开

6、注意到没有没设置 uploader（提交的action路径），这是因为这个表单还有其它参数要传，所是要通过url传值，这个uploader要在程序中动态设置。如下：

点击(此处)折叠或打开

function uploadData(){
var fileName = $("#fileName").val()
var dataFileTypeId = $("#datatype").val()
var description = $("#description").val()
var parameters = 'fileName='+fileName+"&dataFileTypeId="+dataFileTypeId+"&description="+description
var url = 'data/dataAction_saveData.action?'+parameters
$('#datauploadify').uploadify('settings','uploader',url);
$('#datauploadify').uploadify('upload','*')
}

7、后台与Struts文件上传一样，没什么区别，只是默认的文件对象数据要使用Filedata，对应的文件内容数组，文件内容类型数组就成了 FiledataFileName，FiledataContentType如下：

点击(此处)折叠或打开

对于使用java的人，这个怎么看怎么不舒服。Java命名规则为变量首字符小写。怎么修改呢？

查看uploadify doc，有个属性fileObjName，它的默认值为Filedata，可以修改为自己喜欢的，比如fileData。

8、效果图：

ITPub博客

Java web 使用uploadify 进行上传进度条显示