`

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/

分享到:
评论

相关推荐

    jquery文件上传插件 jquery.uploadify.js

    《jQuery文件上传插件jQuery.uploadify.js:跨越浏览器限制的智能解决方案》 在Web开发中,文件上传功能是一项常见的需求,而jQuery.uploadify.js是一款高效且用户友好的文件上传插件,尤其对于需要兼容多种浏览器...

    jquery.uploadify-v2.1.0.rar

    在使用jQuery.uploadify时,首先需要在HTML中引入jQuery库和uploadify插件的相关文件,包括js和css。然后,在JavaScript部分创建一个元素作为上传按钮,并通过jQuery选择器选中它,设置相应的配置项,如`uploader`...

    jquery.uploadify-v2.1.4

    `jQuery Uploadify` 是一个功能强大的JavaScript插件,它使得在网页上实现文件上传变得简单易行。这个插件是基于jQuery库构建的,因此如果你已经熟悉jQuery,那么使用Uploadify将非常直观。本篇文章将深入探讨...

    Uploadify HTML5 版 / Jquery上传插件 全JS

    在JavaScript层面,Uploadify插件通过jQuery库来简化DOM操作和事件处理。jQuery的链式调用和丰富的选择器让设置插件选项变得非常直观。开发者可以通过$.uploadify()方法初始化插件,并传递一个包含各种配置项的对象...

    jquery.uploadify用法.doc

    通过本文的介绍,我们不仅了解了如何在ASP.NET环境下配置和使用jQuery Uploadify插件,还探讨了一些高级功能和注意事项。尽管Uploadify是一款非常优秀的文件上传插件,但在实际应用中还需要根据具体需求进行适当的...

    swfupload上传并转码视频和jquery.uploadify的aspnet例子

    本文将详细讲解如何实现基于SWFUpload和jQuery.uploadify的视频上传及转码功能,这对于ASP.NET开发者来说是非常实用的知识点。 首先,SWFUpload是一个JavaScript库,它允许在不离开页面的情况下进行文件上传。这个...

    jquery.uploadify(v1.6.2修改版).rar

    jQuery Uploadify插件应运而生,它为开发者提供了强大的文件上传解决方案,实现了异步上传和进度条显示等功能。这里我们将详细探讨jQuery Uploadify(v1.6.2修改版)的使用方法和核心特性。 一、jQuery Uploadify...

    Struts2结合Jquery.uploadify上传插件的应用

    在实际应用中,为了提高用户体验,经常需要处理文件上传功能,这时结合jQuery与uploadify插件可以实现高效、美观的文件上传效果。下面将详细探讨Struts2结合jQuery.uploadify插件的应用。 首先,jQuery.uploadify是...

    修正版上传组件-jquery.uploadify.rar_html

    - 引入依赖:首先确保引入jQuery库和uploadify插件的JS和CSS文件。 - 创建上传元素:创建一个`&lt;input type="file"&gt;`或自定义元素,指定ID供插件识别。 - 初始化插件:使用jQuery选择器选取元素,调用`.uploadify...

    jquery 上传插件Uploadify-v3.0.0.zip

    总之,jQuery Uploadify插件v3.0.0是一个强大且灵活的文件上传解决方案,它简化了前端与后端的文件交互,提升了用户体验。通过理解和掌握其配置与用法,开发者可以在项目中轻松实现高效的文件上传功能。

    jquery.uploadify-v2.0.2.rar

    《jQuery Uploadify插件详解与应用实践》 jQuery Uploadify是一款基于jQuery和Flash技术的文件上传组件,其在Web开发中被广泛应用于批量上传、大文件分片上传等场景。在jQuery.uploadify-v2.0.2这个版本中,我们...

    asp.net+jquery.uploadify文件上传(异步上传)

    在这个过程中,jQuery Uploadify插件负责前端的文件选择和上传控制,而后端的C# ASP.NET则处理文件接收和保存。 **jQuery Uploadify插件**: jQuery Uploadify是一款基于jQuery的文件上传组件,它提供了丰富的...

    struts2 jquery.uploadify

    Struts2 jQuery Uploadify是一个整合了Struts2框架与jQuery Uploadify插件的示例项目,主要用于实现文件上传的功能。这个简单的demo展示了如何在Struts2应用中集成jQuery Uploadify,以便提供用户友好的、多文件异步...

    jquery uploadify 源码

    jQuery Uploadify 是一款广泛使用的前端文件上传插件,它借助jQuery库实现了多文件选择、进度显示、预览功能以及异步上传,大大提升了用户在网站上的文件上传体验。本文将深入探讨jQuery Uploadify的源码,分析其...

    jquery上传插件uploadifive

    Uploadifive是一款基于HTML5技术的异步上传插件,它结合了jQuery库,提供了丰富的自定义选项和功能,使得文件上传变得更加便捷和用户体验友好。这款插件适用于那些需要在网页上实现批量、多文件上传功能的开发者。 ...

    jQuery插件(artDialog4, codemirror,My97DatePicker,ueditor,jquery.uploadify-v2.1.0 )

    5. **jquery.uploadify-v2.1.0**:这个是jQuery的一个文件上传插件,它提供了一种友好的用户界面来处理文件上传操作。uploadify支持多文件上传,有进度条显示,还可以设置上传前后的回调函数进行自定义操作。此外,...

    uploadify.zip

    例如,你可能需要修改默认的CSS来适应网站的风格,或者调整JavaScript代码来实现更复杂的功能,如预览上传文件、限制上传大小等。 Uploadify的核心功能是异步上传,这意味着文件的上传不会阻塞用户界面,提高了用户...

    jquery.uploadify+Struts2整合配置

    Uploadify是基于jQuery的一个插件,它允许用户通过异步方式上传文件,提供了丰富的自定义选项和用户体验优化功能,如进度条显示、多文件上传、预览等。 Struts2是一个强大的Java Web框架,基于MVC(Model-View-...

    图片上传插件jquery.uploadify详解

    总的来说,jquery.uploadify插件提供的功能丰富,配置灵活,能够帮助开发者快速实现Web页面中的图片上传功能。开发者需要根据实际需求调整配置参数,并关注在使用过程中可能遇到的问题及其解决方案,以确保插件能够...

    jquery uploadify

    jQuery Uploadify插件为开发者提供了一个强大的解决方案,它允许用户批量上传文件,并且在上传过程中显示进度条,极大地提升了用户体验。本文将深入探讨jQuery Uploadify的工作原理、主要功能以及如何在项目中应用。...

Global site tag (gtag.js) - Google Analytics