`
c_bai
  • 浏览: 36513 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

uploadify3.2+jquery 应用

阅读更多
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.2Demo

    首先,Uploadify3.2基于JavaScript库jQuery,这意味着它能够无缝地与现有的jQuery应用集成,利用jQuery的强大功能来处理DOM操作、事件处理和AJAX请求。jQuery的广泛使用使得开发者对它的API和用法比较熟悉,因此使用...

    uploadify 3.2

    - `jquery.uploadify.js` 和 `jquery.uploadify.min.js`:这是jQuery插件的主要脚本文件,包含Uploadify的逻辑代码,`min.js`是压缩版,用于生产环境以减少加载时间。 - `index.php`:示例页面,展示了如何在实际...

    jQuery插件uploadify3.2.zip

    《jQuery插件uploadify3.2深度解析》 在当今的Web开发中,用户交互体验是至关重要的一环,其中文件上传功能是常见的需求之一。jQuery作为JavaScript库的翘楚,其丰富的插件生态为开发者提供了便利。Uploadify,便是...

    uploadify3.2Demo.rar

    《uploadify3.2Demo.rar》是一个包含上传插件示例的压缩包,主要用于演示Uploadify 3.2版本的功能。Uploadify是一款基于jQuery的文件上传插件,它提供了丰富的自定义选项和交互效果,使得文件上传过程更加友好和高效...

    jquery.uploadify3.2在struts2中使用的完整工程

    【jQuery Uploadify 3.2在Struts2中的应用】 jQuery Uploadify 3.2是一个流行的前端文件上传插件,它允许用户通过Ajax技术实现异步、多文件上传功能,大大提升了用户界面的交互性和用户体验。这个完整的工程是将...

    【Asp.net上传】jQuery.Uploadify 3.2版本的一个实例

    jQuery Uploadify是一款流行的JavaScript库,它提供了一种直观、用户友好的方式来处理多文件上传,适用于各种Web应用程序。 首先,我们要了解jQuery Uploadify的基本原理。这个插件通过模拟HTML5的拖放功能,允许...

    uploadify 3.2 ASP.NET例子

    通常包括`uploadify.css`、`jquery.uploadify.v3.2.min.js`等文件。 2. **HTML结构**:在网页中创建一个`&lt;input type="file"&gt;`元素,作为uploadify的触发元素。然后使用jQuery来初始化uploadify,设置相应的属性,...

    springside4使用Jquery uploadify3.2上传文件

    《使用Jquery Uploadify3.2在Springside4中实现文件上传详解》 在现代Web应用中,文件上传功能是不可或缺的一部分。本篇文章将详细讲解如何在Springside4框架下利用Jquery的Uploadify插件实现文件上传功能。...

    jquery上传插件Uploadify3.2中文详细参考手册

    ### jQuery上传插件Uploadify 3.2中文详细参考手册 #### 一、概述 Uploadify是一款基于jQuery的文件上传插件,它提供了一个简单易用的接口来处理文件上传功能,尤其适用于需要多文件上传、文件预览等功能的场景。...

    uploadify3.2_Java_Servlet_多文件.zip

    这个压缩包"uploadify3.2_Java_Servlet_多文件.zip"包含了一个使用Uploadify与Java Servlet结合的示例,用于处理多文件上传的场景。在本文中,我们将深入探讨Uploadify、Java Servlet以及如何将它们整合在一起实现...

    struts2 +jquey uploadify3.2 实现多文件上传,可预览、删除、排序

    在"struts2 +jquey uploadify3.2 实现多文件上传,可预览、删除、排序"这个项目中,开发者使用了Uploadify 3.2版本,这是一个支持异步上传和批量上传的插件,能够很好地与Struts2框架整合。以下是实现这一功能的关键...

    Uploadify3.1参数详解

    Uploadify是一款基于jQuery的文件上传插件,提供了丰富的自定义选项以及良好的用户体验。其特点包括支持上传进度显示、多文件上传等功能。本篇文章将详细介绍Uploadify3.1版本中与2.1.4版本相比新增或改进的属性、...

    jquery很好用的表单验证和文件上传

    本文将详细探讨"jquery很好用的表单验证和文件上传"这一主题,包括jQuery的表单验证插件以及Uploadify 3.2文件上传组件。 首先,我们来关注jQuery的表单验证功能。jQuery Validation Plugin是用于实现表单验证的...

    asp.net mvc uploadify v3.2.1 使用方法(二)

    在`&lt;head&gt;`部分,添加对jQuery库和Uploadify CSS文件的引用,然后在`&lt;body&gt;`部分创建一个用于上传的`&lt;input type="file"&gt;`元素,并为其应用Uploadify初始化脚本。确保设置`swf`属性指向Flash文件,`uploader`属性...

    多文件、超大文件上传(带进度条)

    这里我们将详细介绍如何使用Uploadify3.2插件在Struts2中实现这一目标。 Uploadify是一款基于jQuery的插件,它允许用户在无需刷新页面的情况下上传多个文件,并且支持文件上传进度条显示,提高了用户体验。...

    struts2结合uploadify上传进度条

    - 配置Uploadify的HTML元素,例如`&lt;input type="file" id="fileInput"&gt;`,并使用jQuery或其他JavaScript库初始化Uploadify,设置参数如`swf`, `uploader`, `queueID`等。 2. **设置Uploadify参数**: - `swf`:...

    jQuery权威指南-源代码

    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章 ...

    Struts2+uploadify多文件上传实例

    在这个实例中,使用的是Uploadify 3.2版本。 首先,我们需要在HTML页面中引入uploadify所需的CSS和JavaScript文件。这包括uploadify.css用于样式化上传界面,jquery.min.js是jQuery库,而jquery.uploadify.min.js是...

    jQuery权威指南366页完整版pdf和源码打包

    前 言 第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...

Global site tag (gtag.js) - Google Analytics