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/

 

另一个例子：

http://www.thinkphp.cn/code/156.html

 

 

 

thinkPHP+uploadify 实现图片上传预览

2013/04/02 16:09lxy1988ab 分享[ ThinkPHP ]评论

上一篇返回下一篇

thinkPHP+uploadify 实现图片上传预览 ,小弟新手，做的不足的地方望指教！ 效果图

模板文件:
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html>
< head>
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

< link href="/Public/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet" type="text/css" />
< link href="/Public/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" />
< script charset="utf-8" type="text/javascript" src="/Public/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>
< script charset="utf-8" type="text/javascript" src="/Public/jquery.uploadify-v2.1.0/swfobject.js"></script>
< script charset="utf-8" type="text/javascript" src="/Public/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

< style type="text/css">
#image{
height:300px;
width:720px;
border:1px #969594 solid;
}
< /style>

< title>图片上传</title>
< /head>
< body>


< form id="form1" enctype="multipart/form-data" >

<div id="fileQueue" style='height:200px;display:none'></div>
<input type="file" name="uploadify" id="uploadify" multiple="true" />
</div>

< /form>
< div id="image" ></div>

< script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'uploader':'/Public/jquery.uploadify-v2.1.0/uploadify.swf', //swf路径
'script': '/Code/file', //后台处理文件上传的路径
'cancelImg':'/Public/jquery.uploadify-v2.1.0/cancel.png', //按钮背景图片的路径
'folder': '/Uploads',
'method':'post',
'buttonText':'file',
'fileExt': '*.jpg;*.gif,*.png', //允许上传的文件格式为*.jpg,*.gif,*.png
'fileDesc': 'Web Image Files(.JPG,.GIF,.PNG)', //过滤掉除了*.jpg,*.gif,*.png的文件
'queueID': 'fileQueue',
'sizeLimit': '2048000', //最大允许的文件大小为2M
'fileDataName':'uploadify',
'auto': false,
'queueSizeLimit':15,
'simUploadLimit':15,
'removeCompleted':false,
'multi':true,
'onCancel': funCancel, //当用户取消上传时
'onComplete': funComplete, //完成上传任务
'OnError': funError //上传发生错误时
});
});
//用户取消函数
function funCancel(event, ID, fileObj, data) {
alert('您取消了操作');
return;
}
//图片上传发生的事件
function funComplete(event, ID, fileObj, response, data) {

//alert('上传事件');
if (response == 0) {
alert('图片' + fileObj.name + '操作失败');
return false;
}else{
var str=$('#image').html();
var add="<img src='"+"/Uploads/"+response+"'" +"style='margin-left:15px;margin-top:15px'/></img>";
str+=add;
$('#image').html(str);
return true;
}
}

//上传发生错误时。
function funError(event, ID, fileObj, errorObj) {
//alert('错误事件');
alert(errorObj.info);
return;
}
< /script>
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|
< /body>
< /html>