图片上传插件jquery.uploadify

1、js代码：

<script type="text/javascript">

$(document).ready(function() {

$('#fileInput').uploadify({

//以下参数均是可选

'uploader' : '<%=basePath%>images/uploadify.swf', //指定上传控件的主体文件，默认‘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、下载地址

www.uploadify.com/download/