`
eric.zhang
  • 浏览: 127007 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery uploadify实现文件上传 flash方式

 
阅读更多

使用 Jquery的插件 uploadify 实现文件的上传,可显示上传进度。。。以下是需要用到的文件:
uploadify.css
jquery.uploadify.v2.1.4.js
swfobject.js

代码如下:

$(document).ready(function(){
		
		//设置Flash上传图片的
		$("#uploadify").uploadify({
			'uploader':'${ctx}/scripts/dwz/uploadify/scripts/uploadify.swf',
			'script':'${ctx}/fileupload/doUpload.json',
			'cancelImg':'${ctx}/scripts/dwz/uploadify/cancel.png',
			'folder':'/uploadFiles',
			'queueID':'fileQueue',
			'auto':false,
			'multi':true,
			'fileExt':'*.jpg;*.gif;*.png;*.JGP;*.GIF;*.PNG',
			'fileDesc':'所有*.jpg;*.gif;*.png文件',
			'buttonText':'browse',
			'displayData':'percentage',
			'onComplete':function(event,queueId,fileObj,response,data){
				var temp = eval("("+response+")");
				var tpxwTem = $("#tpxw").val();
				//显示上传完成的图片
				$("#fileQueue").append('<div name="picDiv" id="'+queueId+'" class="'+temp.successFileName+'"><input type="hidden" name="tpxw" value="'+temp.successFileName+'"><input type="text"  name="ymc" value="'+fileObj.name+'"/><span style="cursor: pointer;">&nbsp;&nbsp;&nbsp;&nbsp;<font color="red">删除</font></span><br/></div>');
				$("input[name='ymc']").attr("readonly","readonly").attr("size","65").attr("class","textInput readonly");
			}
		});
		//给每个上传完成的图片 添加删除事件
		$("div[name='picDiv'] span").live("click",function(){
				deleteUploadFile($(this).parent().attr("id"),$(this).parent().attr("class"));
		});
		//处理上传图片
		$("#doUploadButton").bind("click",function(){
			$('#uploadify').uploadifyUpload();
		})
		
		
	});
	//点击删除上传成功的图片
	function deleteUploadFile(t_queueID,fileName){
		var parameters = new Object();
		parameters["filePath"]=fileName;
		parameters["divId"]=t_queueID;
		parameters["fileFolder"]="uploadFiles";
		$.post("${ctx}/fileupload/deleteFile.json",parameters,function(data){
			if(data["message"]=='success'){	
				var tempid=data["divId"];
				$("#"+tempid).remove();
			}
		},"json");
	}


<tr>
				<td colspan="3"><center>
					<div id="showMessDiv"></div>
					<p id="uploadInfoWhenComplete" style="line-height:15px;color:#bd0a01;display:none;font-size:12px;"></p>
					<div id="fileUploadDiv" style="display: none;">
						<div id="fileQueue" class="fileQueue">
						</div>
						<input type="file" id="uploadify" name="uploadify" />
						<p><br><button id="doUploadButton" onclick="return false;">上传图片</button>
						</p>	
					</div></center>
						
				</td>
			</tr>
			<tr id="uploadMessageTr" style="display: none;"><td colspan="3"><center><font color="red">提示 : 图片大小不能超过1M</font></center></td></tr>
			<tr><td colspan="3">&nbsp;</td></tr>
			<tr>
				<td colspan="3">
					<center>
					<input type="submit" onclick="return checkSubmit();" value="保存"><input type="button" class="close" value="关闭">
					</center>
				</td>
			</tr>




  • 大小: 41 KB
分享到:
评论

相关推荐

    JQuery uploadify 实现批量上传例子

    而Uploadify则是JQuery的一个插件,它提供了一种优雅的方式来实现文件的上传功能,包括单个文件上传和批量上传。本篇文章将详细介绍如何使用JQuery uploadify实现批量上传功能,并探讨其核心原理和相关配置。 首先...

    jquery uploadify 实现批量上传,带进度显示,判断文件大小

    `jQuery Uploadify`是一个开源的文件上传组件,它通过异步方式实现多文件上传,提高了用户体验。它支持预览、取消上传、限制文件类型和大小等功能,特别适合在Web应用中处理图片、文档等文件上传。 ### 2. 安装与...

    jquery uploadify多文件上传例子和详细API

    《jQuery Uploadify 多文件上传实现与API详解》 在当今的Web开发中,用户对交互性和用户体验的要求越来越高,其中,文件上传功能是不可或缺的一部分。jQuery Uploadify是一款强大的JavaScript插件,它允许用户进行...

    jquery uploadify实现批量上传

    总的来说,jQuery Uploadify提供了一种方便、可定制的方式来实现批量文件上传,无论你是前端开发者还是后端开发者,都能轻松集成到你的项目中,提升用户的交互体验。通过理解和熟练运用Uploadify,你可以为用户提供...

    jquery-uploadify 多文件上传界面

    考虑到非 HTML5 浏览器的兼容性问题,`jQuery Uploadify` 使用 Flash 技术作为 fallback 方案,确保在旧版浏览器中也能实现多文件上传。 综上所述,`jQuery Uploadify` 是一个功能强大且易于定制的多文件上传解决...

    jsp,servlet,jquey最新版的jquery uploadify多文件上传

    `jQuery Uploadify`是一个流行的JavaScript库,它允许用户在Web应用中实现多文件上传功能。这个教程将深入讲解如何结合`jsp`(JavaServer Pages)、`servlet`以及`jQuery`的最新版本来创建一个高效的文件上传系统。 ...

    Jquery uploadify 3.0 Flash 上传 包含完整示例

    总结,jQuery Uploadify 3.0是实现高效、友好的文件上传功能的一个优秀工具。通过理解其工作原理和配置方法,开发者可以轻松地将其整合到自己的项目中,提升用户体验。同时,随着HTML5的普及,Uploadify也有HTML5...

    jquery uploadify插件多文件上传(带代码)

    总的来说,jQuery Uploadify是一个强大且易于使用的多文件上传解决方案,它可以帮助开发者轻松实现文件上传功能,同时提供了丰富的定制选项以满足不同的需求。无论你是新手还是经验丰富的开发者,都能从这个插件中...

    Jquery Uploadify多文件上传(JAVA)

    jQuery Uploadify是基于jQuery的文件上传组件,它通过Flash和HTML5技术实现了异步文件上传。Uploadify提供丰富的自定义选项,如选择文件类型、设置上传限制、回调事件处理等,使得前端界面更友好,用户体验更佳。 #...

    asp.net Uploadify 多文件上传 Jquery 多文件上传 Jquery+flash 多文件上传

    Jquery 多文件上传,jquery+flash 多文件上传,界面美观, 很炫的上传组件,支持中文! 本实例经过严格测试,保证能正常使用!网上其他好多实例都不能正常运行。 uploadify是一款容量小、功能强的Js批量上传工具,...

    uploadify多文件上传例子代码

    本示例代码是关于如何使用uploadify在Java环境中(通过jsp和servlet)实现多文件上传的一个实例。 首先,uploadify是一个基于jQuery的插件,它的核心功能是通过Flash或HTML5技术提供了一种友好的用户界面,让用户...

    JQuery uploadify文件上传案例及文档(2.0和3.2)

    文件上传功能基于jquery uploadify+ajax+ashx+flash技术实现,功能庞大,并具有良好的移植性。其能够一次性选择多个文件上传,查看上传进度,控制文件上传类型和大小,限制上传数量,接受服务器反馈信息,为每一步...

    jquery文件上传插件 jquery.uploadify.js 不支持IE10现在经过修改

    在IT行业中,jQuery Uploadify.js是一款非常流行的前端文件上传插件,它允许用户通过异步方式上传文件到服务器,提供了一种友好的用户体验。然而,随着浏览器版本的更新,一些较旧的插件可能不再兼容新的浏览器,...

    jquery.uploadify-v2.1.4[修正版]

    值得注意的是,虽然jQuery.uploadify在很多项目中表现出色,但随着HTML5技术的发展,现代浏览器已经普遍支持了基于HTML5的文件上传,这种方式无需Flash,且具有更好的跨平台性和安全性。然而,考虑到仍然有部分用户...

    Jquery Uploadify多文件上传带进度条 且传递自己的参数示例

    在本文中,我们将深入探讨如何使用Jquery Uploadify插件实现多文件上传功能,并结合进度条显示上传进度,同时传递自定义参数。Jquery Uploadify是一个广泛使用的jQuery插件,它使得在网页上进行文件上传变得简单而...

    JQuery uploadify文件上传控件

    **jQuery Uploadify 文件上传控件详解** 在网页开发中,文件上传功能是非常常见且重要的一个环节。jQuery Uploadify是一款高效、易用的jQuery插件,它使得文件上传变得更加直观和用户体验友好。本篇文章将深入探讨...

    Jquery Uploadify +Java 文件上传

    总之,`jQuery Uploadify` 和 `Java` 结合使用,能够实现高效、用户友好的多文件上传功能。通过`Apache Commons FileUpload`处理服务器端的文件上传,可以有效地管理上传的文件并保证系统稳定性。在实际开发中,根据...

    jquery uploadify 多文件传

    jQuery Uploadify 是由Aaron Kurtz 创建的一款基于 jQuery 的开源插件,它提供了一种异步的多文件上传方式,支持批量上传、进度条显示、预览功能等。通过 Flash 或 HTML5 技术,Uploadify 可以在多种浏览器上运行,...

    jquery uploadify插件多文件上传

    总的来说,`jQuery Uploadify`是一个强大且灵活的文件上传解决方案,通过前端和后端的配合,可以实现高效、安全的多文件上传功能。开发者可以根据项目需求,对其进行适当的定制和优化,以满足不同的业务场景。

    jquery uploadify批量上传中文版

    Uploadify的独特之处在于它利用了Flash技术,可以在不刷新页面的情况下实现多文件上传,并且提供了丰富的自定义选项,包括上传按钮的样式、提示信息等。 2. **中文按钮设置** 描述中提到,我们可以使用`buttonText...

Global site tag (gtag.js) - Google Analytics