JQuery插件大全之Uploadify

  下载地址:
www.uploadify.com/demos/
使用方法:
http://www.uploadify.com/documentation/

//1.准备好一个文件框元素
<input type="file" id="poster" name="image">

//2.渲染这个元素
$("#poster").uploadify({
'swf': '${pageContext.request.contextPath}/plugins/uploadify/uploadify.swf',
'uploader': '${pageContext.request.contextPath}/media?action=upload',
'buttonText' : '选择文件', 
'fileTypeExts' : '*.png;*.jpg;*.jpeg',
'fileSizeLimit' : '2MB'
});

//3.注意 火狐浏览器 会因为flash不安全的原因 将它禁用
//在渲染之前 需要添加许可
swfobject.embedSWF('${pageContext.request.contextPath}/plugins/uploadify/uploadify.swf', "sd_file", "120", "30", "#666");

//4.当上传成功之后 我们可以利用 内置的回调方法
onUploadSuccess' : function(file, data, response) 
file: 上传的文件信息
data: 从后台回传过来的数据
response 是否后台传递了数据没有 true/false

//5.全部代码
swfobject.embedSWF('${pageContext.request.contextPath}/plugins/uploadify/uploadify.swf', "sd_file", "120", "30", "#666");
$("#poster").uploadify({
'swf': '${pageContext.request.contextPath}/plugins/uploadify/uploadify.swf',
'uploader': '${pageContext.request.contextPath}/media?action=upload',
'buttonText' : '选择文件',
'fileTypeExts' : '*.png;*.jpg;*.jpeg',
'fileSizeLimit' : '2MB',
'onUploadSuccess' : function(file, data, response) {
//1.获取后台传递的data json
//2.将他转换为js对象
var $json=$.parseJSON(data);
//3.判断是否执行成功
if($json.flag)
{
//4.上传成功
alert($json.msg);
//5.将文件的路径显示再img的src的属性中
$("#posterimage").attr("src","${pageContext.request.contextPath}/upload/poster/"+$json.data);
}
}