uploadify是一个flash文件和一个基于jquery的JS文件构成。说白了就是用JS来控制的一个flash上传控件,上传效果感觉很不错。
下载uploadify的文件到指定目录 下载地址http://www.uploadify.com/download/
下载完插件后,只需要在自己的项目中引入对应的文件即可。
<link href="uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.uploadify.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
然后在写相关代码,如:
$(function() {
$("#uploadify").uploadify(
{
'swf' : 'js/uploadify.swf',
'uploader' : 'uploadFile.action', // 上传到后台的处理类
'cancelImg' : 'img/cancel.png', // 取消按钮的图片
'fileObjName' : 'file', // 传到后台的对象名
'queueID' : 'fileQueue',
'fileSizeLimit' : '8589934592', // 限制文件上传的大小
'buttonText' : '上传附件', // 按钮上的文字
'auto' : false, // 是否自动上传
'multi' : true, // 是否支持多文件上传
'removeComplete' : false,
'onUploadStart' : function(file) {
$("#uploadify").uploadify( 'settings','uploader',
'uploadFile.actiontitle='+$("#titles").val()+'&content='+$("#content").val()); },'onQueueComplete' : function (queueData){
alert("上传完毕!");
}
});
<td style="text-align: left;" colspan="2">
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify"/>
</td>
注意:
安装的时候涉及到的文件(uploadify.swf,uploadify.css,jquery.uploadify.min.js)路径一定要正确。
因为当时我自己就是因为路径的问题,一直渲染不到插件,还有就是自己电脑上要安装flash插件,要不然也会没有进度条。
中途中,我还碰到一个小问题:有的人他不想上传文件,只想把其它的文件框填完就可以了,
我是去判断 <div id="fileQueue"></div>里面是否有东西,如果选择了文件 <div id="fileQueue"></div> 肯定会有东西,如:
如果不想选择文件,用js 判断下
if("" == document.getElementById("fileQueue").innerHTML)
这个也是一种方法啦,如果有更好的方法,也跟大家分享下。
分享到:
相关推荐
首先,Uploadify3.2基于JavaScript库jQuery,这意味着它能够无缝地与现有的jQuery应用集成,利用jQuery的强大功能来处理DOM操作、事件处理和AJAX请求。jQuery的广泛使用使得开发者对它的API和用法比较熟悉,因此使用...
- `jquery.uploadify.js` 和 `jquery.uploadify.min.js`:这是jQuery插件的主要脚本文件,包含Uploadify的逻辑代码,`min.js`是压缩版,用于生产环境以减少加载时间。 - `index.php`:示例页面,展示了如何在实际...
《jQuery插件uploadify3.2深度解析》 在当今的Web开发中,用户交互体验是至关重要的一环,其中文件上传功能是常见的需求之一。jQuery作为JavaScript库的翘楚,其丰富的插件生态为开发者提供了便利。Uploadify,便是...
《uploadify3.2Demo.rar》是一个包含上传插件示例的压缩包,主要用于演示Uploadify 3.2版本的功能。Uploadify是一款基于jQuery的文件上传插件,它提供了丰富的自定义选项和交互效果,使得文件上传过程更加友好和高效...
【jQuery Uploadify 3.2在Struts2中的应用】 jQuery Uploadify 3.2是一个流行的前端文件上传插件,它允许用户通过Ajax技术实现异步、多文件上传功能,大大提升了用户界面的交互性和用户体验。这个完整的工程是将...
jQuery Uploadify是一款流行的JavaScript库,它提供了一种直观、用户友好的方式来处理多文件上传,适用于各种Web应用程序。 首先,我们要了解jQuery Uploadify的基本原理。这个插件通过模拟HTML5的拖放功能,允许...
通常包括`uploadify.css`、`jquery.uploadify.v3.2.min.js`等文件。 2. **HTML结构**:在网页中创建一个`<input type="file">`元素,作为uploadify的触发元素。然后使用jQuery来初始化uploadify,设置相应的属性,...
《使用Jquery Uploadify3.2在Springside4中实现文件上传详解》 在现代Web应用中,文件上传功能是不可或缺的一部分。本篇文章将详细讲解如何在Springside4框架下利用Jquery的Uploadify插件实现文件上传功能。...
### jQuery上传插件Uploadify 3.2中文详细参考手册 #### 一、概述 Uploadify是一款基于jQuery的文件上传插件,它提供了一个简单易用的接口来处理文件上传功能,尤其适用于需要多文件上传、文件预览等功能的场景。...
这个压缩包"uploadify3.2_Java_Servlet_多文件.zip"包含了一个使用Uploadify与Java Servlet结合的示例,用于处理多文件上传的场景。在本文中,我们将深入探讨Uploadify、Java Servlet以及如何将它们整合在一起实现...
在"struts2 +jquey uploadify3.2 实现多文件上传,可预览、删除、排序"这个项目中,开发者使用了Uploadify 3.2版本,这是一个支持异步上传和批量上传的插件,能够很好地与Struts2框架整合。以下是实现这一功能的关键...
Uploadify是一款基于jQuery的文件上传插件,提供了丰富的自定义选项以及良好的用户体验。其特点包括支持上传进度显示、多文件上传等功能。本篇文章将详细介绍Uploadify3.1版本中与2.1.4版本相比新增或改进的属性、...
本文将详细探讨"jquery很好用的表单验证和文件上传"这一主题,包括jQuery的表单验证插件以及Uploadify 3.2文件上传组件。 首先,我们来关注jQuery的表单验证功能。jQuery Validation Plugin是用于实现表单验证的...
在`<head>`部分,添加对jQuery库和Uploadify CSS文件的引用,然后在`<body>`部分创建一个用于上传的`<input type="file">`元素,并为其应用Uploadify初始化脚本。确保设置`swf`属性指向Flash文件,`uploader`属性...
这里我们将详细介绍如何使用Uploadify3.2插件在Struts2中实现这一目标。 Uploadify是一款基于jQuery的插件,它允许用户在无需刷新页面的情况下上传多个文件,并且支持文件上传进度条显示,提高了用户体验。...
- 配置Uploadify的HTML元素,例如`<input type="file" id="fileInput">`,并使用jQuery或其他JavaScript库初始化Uploadify,设置参数如`swf`, `uploader`, `queueID`等。 2. **设置Uploadify参数**: - `swf`:...
1.1.4 编写第一个简单的jQuery应用/3 1.1.5 jQuery程序的代码风格/5 1.2 jQuery的简单应用/7 1.2.1 jQuery访问DOM对象/7 1.2.2 jQuery控制DOM对象/7 1.2.3 jQuery控制页面CSS /9 1.3 本章小结/11 第2章 ...
在这个实例中,使用的是Uploadify 3.2版本。 首先,我们需要在HTML页面中引入uploadify所需的CSS和JavaScript文件。这包括uploadify.css用于样式化上传界面,jquery.min.js是jQuery库,而jquery.uploadify.min.js是...
前 言 第1章 jquery开发入门/1 1.1 jquery概述/2 1.1.1 认识jquery /2 1.1.2 jquery基本功能/2 1.1.3 搭建jquery开发环境/3 1.1.4 编写第一个简单的jquery应用/3 1.1.5 jquery程序的代码风格/5 1.2...