- 文件上传是web项目常见的功能模块，但是基于服务器安全和存储的考虑，一般需要限制上传文件的类型和文件的大小。但是现存的js验证文件大小的方法很少有能够兼容多个浏览器的，尤其ie9+想要验证文件的大小就必须需要降低浏览器的安全性，否则就会出现上传失败的情况，用户的体验很不好。
- 在此介绍一个上传文件插件（Uploadify），它可以实现文件大小和格式的限制，不过前提是浏览器有Flash插件或者是HTML5。
项目配置
- 先去官网下载uploadify包解压缩后放到一个文件夹下，引入到项目中。
- http://www.uploadify.com/download/
前端代码
<input id="file_upload_1" style = "line-height: 6px;" type="file" name="myfile" value = "上传"/>
<script type="text/javascript">
$(function() {
var result=0;
$("#file_upload_1").uploadify({
height : 30,
swf : '${pageContext.request.contextPath }/uploadify/uploadify.swf',
'fileSizeLimit': '1MB',//上传附件大小,0不限制,5120B/512KB/2MB/1GB
'fileTypeDesc': '支持的格式：*.jpg;*.jpge;*.gif;*.png',
'fileTypeExts': '*.jpg;*.jpge;*.gif;*.png',//上传附件后缀限制,*.*不限制
width : 120,
multi:false,
'fileObjName' : 'myFile',
buttonText : '单张上传' ,
uploader : '<%=basePath%>/pub/FileUpload/upload.do;jsessionid=${pageContext.session.id}',//'jsessionid'这段可以兼容火狐浏览器
//没有兼容的FLASH时触发
'onFallback':function(){
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
//有时候上传进度什么想自己个性化控制，可以利用这个方法
//使用方法见官方说明
},
// 选择上传文件后调用
'onSelect' : function(file) {
result++;
if(result>1)
{
alert("您只能上传一张图片！");
var qs=$('#file_upload-queue>div');//所有的队列
var id=qs.eq(1).attr('id');//得到第三个队列的id
$('#file_upload_1').uploadify('cancel',id);//这样就行了，会自动重置队列数量和删除dom对象，不能直接qs.eq(2).remove()，无效
}
return false;
},
'overrideEvents': ['onSelectError', 'onDialogClose'],//保证提示语句只出现一次
'onUploadSuccess':function(file,data,response){
alert(data);//文件名称
},
//上传失败 //附件格式不正确，请上传JPG、BMP、PNG格式文件，大小不超过3MB
'onSelectError':function(file, errorCode){
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload_1').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload_1').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("文件 ["+file.name+"] 大小异常！");
break;
case -130:
alert("文件 ["+file.name+"] 类型不正确！");
break;
};
}
});
});
</script>文件替换可以在‘onUploadSuccess’方法中加入以下代码
var curLimit = $("#file_upload_1").uploadify('settings','uploadLimit'); $("#file_upload_1").uploadify('settings','uploadLimit',curLimit+1);去掉以下代码:
'onSelect' : function(file) {
result++;
if(result>1)
{
alert("您只能上传一张图片！");
var qs=$('#file_upload-queue>div');- “uploader”标签为后台处理文件的方法，引入文件的地方修改相应路径。
后台java代码
：
@Controller
@RequestMapping("/pub/FileUpload")
public class FileUploadUtil {
@RequestMapping("/upload")
@ResponseBody
public void writeInfo(HttpServletRequest request,
HttpServletResponse response) throws IOException {
HttpSession session = request.getSession();
String string = (String) request.getAttribute("refersh");
System.out.println(string);
// String ip=request.getLocalAddr();
String id = session.getId();
System.out.println(id);
// System.out.println(ip);
// 上传附件
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile file = multipartRequest.getFile("myFile");
// 获取服务器地址
ServletContext sc = request.getSession().getServletContext();
// 附件存放服务器路径
String dir = sc.getRealPath("/upload/" + id + "/");
// 某一文件夹路径
String filename = request.getContextPath() + "/upload/" + id;
// 如果文件夹不存在，则创建文件夹
if (!new File(dir).exists()) {
new File(dir).mkdirs();
}
String fileName = file.getOriginalFilename();
String realName = fileName.substring(0, fileName.indexOf("."));
// 防止文件被覆盖，以纳秒生成文件名称
Long _l = System.nanoTime();
String _extName = fileName.substring(fileName.indexOf("."));
fileName = _l + _extName;
String uploadPath = request.getContextPath() + "/upload/" + id + "/"
+ fileName;
// 存储格式为：/项目名/upload/yingjiwuzhi/43038800303864.log
// 存储到数据库的相对路径
String responseStr = "";
try {
FileUtils.writeByteArrayToFile(new File(dir, fileName),
file.getBytes());// 服务器中生成文件
} catch (IOException e) {
e.printStackTrace();
}
response.getWriter().print(fileName);
}后台需要引入commons-io-2.0.1.jar文件
因为这个插件都是预先把文件上传到服务器，这样势必会出现很多垃圾文件，我的处理方案是预上传的文件都保存在一个临时文件夹，用户点击确认提交后把最终上传的那份文件拷贝到服务器的正式文件夹，至于临时文件夹会在项目重启的时候进行清空。