jQuery Uploadify 插件配置与常见问题详解

作者:橙子

时间:2026-10-27

浏览:488

本文详细介绍 jQuery Uploadify 插件的配置方法,涵盖关键参数如 uploader、script、fileExt 等的使用。通过完整 JS 代码示例展示如何绑定事件并处理上传结果。同时针对按钮不显示、自动上传未触发、后台文件名变更等常见问题提供解决方案,帮助开发者快速实现图片上传与预览功能。

文章目录

jQuery Uploadify 插件配置与常见问题详解

首先引入必要的 JavaScript 代码进行初始化配置。

具体实现代码如下:

<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').uploadify({
// 以下参数均为可选配置
'uploader' : '<%=basePath%>images/uploadify.swf', // 指定上传控件的主体 Flash 文件路径,默认值为 'uploader.swf'
'script' : '<%=basePath%>UploadServlet', // 指定服务器端处理上传请求的文件路径,默认值为 'upload.php'
'cancelImg' : '<%=basePath%>images/cancel.png', // 指定取消上传按钮的图片路径,默认值为 'cancel.png'
'buttonImg':'<%=basePath%>images/upload2.jpg', // 自定义上传按钮的图片路径
'auto' : true, // 是否选择文件后自动开始上传,默认值为 false
'folder' : '/userphoto' , // 指定文件上传到服务器的目标目录路径,默认值为 '/'
'multi' : false, // 是否允许同时上传多个文件,默认值为 false
'fileDesc' : '图片文件' , // 在文件选择对话框中显示的文件类型描述文本
'fileExt' : '*.jpg;*.bmp;*.png;*.gif', // 限制可上传文件的扩展名,启用此选项时必须同时声明 fileDesc
'sizeLimit': 86400, // 限制上传文件的大小,单位为字节 (byte)
'onComplete': function(event,queueID,fileObj,response,data) {
$('#image').attr("src","<%=basePath%>userphoto/"+response);
$('#image').show();
$('#photo').attr("value",response);
}, 
'onError' : function(event, queueID, fileObj)
{ 
alert("文件:" + fileObj.name + " 上传失败");
} 
}); 
}); 
</script>
 

2、注意事项

(1)、如果页面没有显示“BROWSE”按钮,则说明你的'uploader' : '<%=basePath%>images/uploadify.swf'配置不对,检查下路径是否正确。

(2)、如果需要修改按钮的图片:可以使用'buttonImg'配置进行替换

(3)、上传完成后,'onComplete'事件没有触发:在后台servlet处理完后,要向页面输出1,否则页面的onComplete回 调函数不会执行。response.getWriter().write(1);

(4)、如果在后台servlet处理上传将图片的名称改变的话,就不能通过fileObj获得它的值,而是要在后台servlet输出新文件 名:out.print(filename);在jsp页面要相应使用response来获得新值。

(5)、图片预览实现:

在jsp页面中添加一个<img src=""></img>,当上传完成后在onComplete事件中修改img的src值。

3、下载地址 http://www.uploadify.com/download/

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章