加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

图片上传插件jquery.uploadify详解

发布时间:2020-12-14 22:28:16 所属栏目:资源 来源:网络整理
导读:1、js代码: 复制代码 代码如下: script type="text/javascript" $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : '%=basePath%images/uploadify.swf',//指定上传控件的主体文件,默认‘uploader.swf' 'script

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,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/

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读