本文详细介绍使用jQuery Uploadify插件进行文件上传的过程。包括插件的安装、配置及使用方法，并提供了一个Java后端处理文件上传的具体示例。
最近做文件上传，使用了jquery-uploadify插件，用的是官网最新的3.2版本，官网地址：http://www.uploadify.com/download/
在这里建议下：在面对最新的版本的时候，最好是去它的官网查看文档，同时借鉴下别人写的旧版本的使用心得，这样就能快速的上手了，好了，言归正传，let's go
解压下载的文件到任意一个目录下面，文件夹名称为uploadify,最好是自己重命名一下，在后面加上版本号；文件内容如下
官方给的是php的示例，这里我用的java所以就不看了，直接删了只留下以下文件：
接下来就是如何使用了，首先，在页面加入引用，主要是三个文件，一个是jquery必不可少的，另外两个就是插件文件夹下面的了，这个插件文件夹可以拷贝到自己的项目路径下，如我的就是在项目根目录下的js文件里面，同时要在根目录下面建立一个img文件夹，将上图中的uploadify-cancel.png图片放进去，这样子可以解决插件取消文件队列报错找不到图片的错误
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="./js/uploadify/uploadify.css">
<script type="text/javascript" src="./js/uploadify/jquery.uploadify.js"></script>
这里图片路径一定要是对的，还有一个要注意的问题就是jquery冲突 问题，在很多时候做页面的时候，我们都是喜欢引入头部，底部两个页面，问题就在这里，如果你的主页面也就是需要用到插件的页面引入了这两个页面的话，必须保证这两个页面中没有引入多余的jquery.js文件，不然就会导致出现$(..).uploadify not a function 的错误。切记，这是我亲自尝过的苦啊。
接下来就是渲染上传按钮的操作了，代码如下：
页面HTML
<tr>
<td class="align_right">
<em><font color="red">*</font></em>
<label>上传写真照</label>
</td>
<td class="input_style">
<div class="upload_div">
<input id="upload_photo" class="upload_button" type="button" value="本地上传"/>
<input type="hidden" id="userPhoto" name="userPhoto"/>
<div id="photo_queue"></div>
<p>最多上传10张照片，尺寸480*800，格式jpg或png可批量上传</p>
</div>
</td>
</tr>JS文件
$("#upload_photo").uploadify({
//按钮额外自己添加点的样式类.upload
'buttonClass' : 'upload',
//限制文件上传大小
'fileSizeLimit' : '2MB',
//文件选择框显示
'fileTypeDesc' : '选择图片',
//文件类型过滤
'fileTypeExts' : '*.jpg;*.png',
//按钮高度
'height' : '30',
//按钮宽度
'width' : '100',
//请求类型
'method' : 'post',
//是否支持多文件上传
'multi' : true,
//需要重写的事件
'overrideEvents' : ['onDialogClose','onSelectError','onUploadError'],
//队列ID，用来显示文件上传队列与进度
'queueID' : 'photo_queue',
//队列一次最多允许的文件数，也就是一次最多进入上传队列的文件数
'queueSizeLimit' : 10,
//上传动画，插件文件下的swf文件
'swf' : './js/uploadify/uploadify.swf',
//处理上传文件的服务类
'uploader' : '/UploadFileServlet?type=photo&uploadPath=' + userId + '\\' + appId,
//上传文件个数限制
'uploadLimit' : 10,
//上传按钮内容显示文本
'buttonText' : '图片上传',
//自定义重写的方法，文件上传错误触发
'onUploadError' : uploadify_onUploadError,
//文件选择错误触发
'onSelectError' : uploadify_onSelectError,
//文件队列上传完毕触发
'onQueueComplete' : heightReset,
//队列开始上传触发
'onUploadStart' : heightFit,
//单个文件上传成功触发
'onUploadSuccess' : function(file, data, response){
$("#userPhoto").attr("value",data);
//恢复原始高度
}
});
这里有个小问题就是：'queueSizeLimit' 和 'uploadLimit'这两个参数配置的效果是一样的，而且哪个配置的小，就是按照哪个来的，也就是说想通过插件来实现限制上传文件个数是不现实的，这个必须结合后台程序才能限制总的文件上传个数。可以在'onUploadStart'中通过ajax请求后台程序，返回文件个数，然后在做相应的处理
后台处理文件上传服务类：
public Map<String, String> uploadPackage(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//使用apache开源组织下的commons-fileupload-1.2.jar组件做文件上传
String projectPath = PathTool.getWebRootPath();
String tempPath = projectPath + "uploadFile/temp";
Map<String, String> params = new HashMap<String, String>();
try
{
DiskFileItemFactory factory = new DiskFileItemFactory();
//设置文件缓冲区大小
factory.setSizeThreshold(1024 * 1024);
//超过缓冲区大小，临时文件放在什么地方
factory.setRepository(new File(tempPath));
//2、使用文件上传工厂，创建一个文件上传的servlet对象；解析表单，保存到list里面
ServletFileUpload upload = new ServletFileUpload(factory);
//允许上传的大小，以字节为单位
upload.setFileSizeMax(1024 * 1024 * 1024);
//设置编码格式
upload.setHeaderEncoding("UTF-8");
// 得到所有的表单域，它们目前都被当作FileItem
List<FileItem> items = upload.parseRequest(request);
Iterator<FileItem> iter = items.iterator();
// 依次处理请求
while (iter.hasNext())
{
FileItem item = iter.next();
if (item.isFormField())
{ // 如果是普通的表单域
/* "处理普通表单内容 ... */
String name = item.getFieldName();
String value = new String(item.getString().getBytes("ISO-8859-1"), "utf-8");
params.put(name, value);
}
else
{ /* 如果是文件上传表单域 */
// 1.获取文件名
String fileName = item.getName();
String fieldName = item.getFieldName(); //文件域名称
String contentType = item.getContentType(); //文件类型
if (fileName != null & !"".equals(fileName))
{
System.out.println("文件域名称：" + fieldName + "\n文件名：" + fileName + "\n文件类型：" + contentType);
//获取文件后缀名
String suffix = fileName.substring(fileName.lastIndexOf(".")+1);
// 2.先将上传文件保存到本地硬盘上
ServletContext context = this.getServletContext();
String dir = "";
//=======将上传的文件存放到服务器的专门的文件夹下：uploadfile============
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddhhmmss");
fileName = sdf.format(date) + fileName;
//这里判断文件类型
//以应用id做为文件夹分类
if("png".equals(suffix) || "jpg".equals(suffix)){
dir = context.getRealPath("uploadFile/photo/");
}
if("mp3".equals(suffix)){
dir = context.getRealPath("uploadFile/music/");
}
dir += appId;
System.out.println(dir);
File file = new File(dir,fileName);
//当且仅当不存在具有此抽象路径名指定名称的文件时，不可分地创建一个新的空文件
file.createNewFile();
// 获得流，读取数据写入文件
InputStream in = item.getInputStream();
FileOutputStream fos = new FileOutputStream(file);
int len = 0;
byte[] buffer = new byte[1024];
// 3.获取本地文件的绝对路径
while ((len = in.read(buffer)) > 0){
fos.write(buffer, 0, len);
}
// 关闭资源文件操作
fos.close();
in.close();
// 删除临时文件
item.delete();
//new FtpUploadThread(filepath, "handbb_down", fileName).run();
//这里判断是图片还是mp3文件
if("png".equals(suffix) || "jpg".equals(suffix)){
photo += fileName + ",";
}
if("mp3".equals(suffix)){
music += fileName + ",";
}
// 7.删除本地文件
//file.delete();
}
else
{// 修改操作时，如果没有上传文件
// if("icon_url".equalsIgnoreCase(fieldName)){
// }
// if("download_url".equalsIgnoreCase(fieldName)){
// }
}
}
}
params.put("photo", photo);
params.put("music", music);
}
catch (Exception e)
{
e.printStackTrace();
}
return params;
}好了，基本的使用方法就到这里了
扫一扫
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
