使用 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;"> <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"> </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
分享到:
相关推荐
而Uploadify则是JQuery的一个插件,它提供了一种优雅的方式来实现文件的上传功能,包括单个文件上传和批量上传。本篇文章将详细介绍如何使用JQuery uploadify实现批量上传功能,并探讨其核心原理和相关配置。 首先...
`jQuery Uploadify`是一个开源的文件上传组件,它通过异步方式实现多文件上传,提高了用户体验。它支持预览、取消上传、限制文件类型和大小等功能,特别适合在Web应用中处理图片、文档等文件上传。 ### 2. 安装与...
《jQuery Uploadify 多文件上传实现与API详解》 在当今的Web开发中,用户对交互性和用户体验的要求越来越高,其中,文件上传功能是不可或缺的一部分。jQuery Uploadify是一款强大的JavaScript插件,它允许用户进行...
总的来说,jQuery Uploadify提供了一种方便、可定制的方式来实现批量文件上传,无论你是前端开发者还是后端开发者,都能轻松集成到你的项目中,提升用户的交互体验。通过理解和熟练运用Uploadify,你可以为用户提供...
考虑到非 HTML5 浏览器的兼容性问题,`jQuery Uploadify` 使用 Flash 技术作为 fallback 方案,确保在旧版浏览器中也能实现多文件上传。 综上所述,`jQuery Uploadify` 是一个功能强大且易于定制的多文件上传解决...
`jQuery Uploadify`是一个流行的JavaScript库,它允许用户在Web应用中实现多文件上传功能。这个教程将深入讲解如何结合`jsp`(JavaServer Pages)、`servlet`以及`jQuery`的最新版本来创建一个高效的文件上传系统。 ...
总结,jQuery Uploadify 3.0是实现高效、友好的文件上传功能的一个优秀工具。通过理解其工作原理和配置方法,开发者可以轻松地将其整合到自己的项目中,提升用户体验。同时,随着HTML5的普及,Uploadify也有HTML5...
总的来说,jQuery Uploadify是一个强大且易于使用的多文件上传解决方案,它可以帮助开发者轻松实现文件上传功能,同时提供了丰富的定制选项以满足不同的需求。无论你是新手还是经验丰富的开发者,都能从这个插件中...
jQuery Uploadify是基于jQuery的文件上传组件,它通过Flash和HTML5技术实现了异步文件上传。Uploadify提供丰富的自定义选项,如选择文件类型、设置上传限制、回调事件处理等,使得前端界面更友好,用户体验更佳。 #...
Jquery 多文件上传,jquery+flash 多文件上传,界面美观, 很炫的上传组件,支持中文! 本实例经过严格测试,保证能正常使用!网上其他好多实例都不能正常运行。 uploadify是一款容量小、功能强的Js批量上传工具,...
本示例代码是关于如何使用uploadify在Java环境中(通过jsp和servlet)实现多文件上传的一个实例。 首先,uploadify是一个基于jQuery的插件,它的核心功能是通过Flash或HTML5技术提供了一种友好的用户界面,让用户...
文件上传功能基于jquery uploadify+ajax+ashx+flash技术实现,功能庞大,并具有良好的移植性。其能够一次性选择多个文件上传,查看上传进度,控制文件上传类型和大小,限制上传数量,接受服务器反馈信息,为每一步...
在IT行业中,jQuery Uploadify.js是一款非常流行的前端文件上传插件,它允许用户通过异步方式上传文件到服务器,提供了一种友好的用户体验。然而,随着浏览器版本的更新,一些较旧的插件可能不再兼容新的浏览器,...
值得注意的是,虽然jQuery.uploadify在很多项目中表现出色,但随着HTML5技术的发展,现代浏览器已经普遍支持了基于HTML5的文件上传,这种方式无需Flash,且具有更好的跨平台性和安全性。然而,考虑到仍然有部分用户...
在本文中,我们将深入探讨如何使用Jquery Uploadify插件实现多文件上传功能,并结合进度条显示上传进度,同时传递自定义参数。Jquery Uploadify是一个广泛使用的jQuery插件,它使得在网页上进行文件上传变得简单而...
**jQuery Uploadify 文件上传控件详解** 在网页开发中,文件上传功能是非常常见且重要的一个环节。jQuery Uploadify是一款高效、易用的jQuery插件,它使得文件上传变得更加直观和用户体验友好。本篇文章将深入探讨...
总之,`jQuery Uploadify` 和 `Java` 结合使用,能够实现高效、用户友好的多文件上传功能。通过`Apache Commons FileUpload`处理服务器端的文件上传,可以有效地管理上传的文件并保证系统稳定性。在实际开发中,根据...
jQuery Uploadify 是由Aaron Kurtz 创建的一款基于 jQuery 的开源插件,它提供了一种异步的多文件上传方式,支持批量上传、进度条显示、预览功能等。通过 Flash 或 HTML5 技术,Uploadify 可以在多种浏览器上运行,...
总的来说,`jQuery Uploadify`是一个强大且灵活的文件上传解决方案,通过前端和后端的配合,可以实现高效、安全的多文件上传功能。开发者可以根据项目需求,对其进行适当的定制和优化,以满足不同的业务场景。
Uploadify的独特之处在于它利用了Flash技术,可以在不刷新页面的情况下实现多文件上传,并且提供了丰富的自定义选项,包括上传按钮的样式、提示信息等。 2. **中文按钮设置** 描述中提到,我们可以使用`buttonText...