使用 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
分享到:
相关推荐
Jquery 多文件上传,jquery+flash 多文件上传,界面美观, 很炫的上传组件,支持中文! 本实例经过严格测试,保证能正常使用!网上其他好多实例都不能正常运行。 uploadify是一款容量小、功能强的Js批量上传工具,...
文件上传功能基于jquery uploadify+ajax+ashx+flash技术实现,功能庞大,并具有良好的移植性。其能够一次性选择多个文件上传,查看上传进度,控制文件上传类型和大小,限制上传数量,接受服务器反馈信息,为每一步...
jsp使用uploadify插件实现文件上传的示例,测试时将uploadify 直接导入myeclipse就能用了。 uploadify是一个与jquery和flash结合实现的上传程序,界面挺漂亮,用起来也方便,不过浏览器需要安装有Flash插件,好像...
Uploadify 是一个非常好的jQuery文件上传插件,可以实现无刷新多文件上传,带进度显示,基于Flash与Ajax技术。我在Firefox 4.0.1 和 IE 9.0.8112 浏览器中使用,兼容性良好。使用许可是 MIT,免费开源且可自由地用于...
uploadify功能强大,支持多文件、批量上传、状态进度条等,提供前端文件限制相关设置。由于是flash环境全面支持asp、asp.net、php等平台。 该文件为uploadify for asp的demo,解压后即可运行。
之前上传了一个通过Flash实现多文件上传,但是在IE正常运行,当有后台过滤和鉴权时,FireFox 不能正常上传。经过反复研究学习,最终实现了IE 和FireFox 兼容问题。之所以在有后台鉴权时firefox和360浏览器无法正常...
uploadify-h5上传插件,解决uploadify插件中需要下载flash的问题
Uploadify是jQuery的一款很棒的多文件上传插件,我这个Demo是基于Uploadify v3.2(Flash-Based Multiple File Uploader )官方Demo写的,里面增加了几个小功能,用来演示,抛砖引玉。Demo里面有很详细的中文注释,另外...
Uploadify c# 大文件上传asp.net c#版,包含flash可修改源文件 JQuery上传插件Uploadify 含示例代码和源文件
jQuery上传插件Uploadify使用详解
Uploadify 是一个非常好的jQuery文件上传插件,可以实现无刷新多文件上传,带进度显示,基于Flash与Ajax技术。我在Firefox 4.0.1 和 IE 9.0.8112 浏览器中使用,兼容性良好。使用许可是 MIT,免费开源且可自由地用于...
uploadify是一个flash文件和一个基于jquery的JS文件构成。说白了就是用JS来控制的一个flash上传控件。
UploadiFive是一款来自国外的、优秀的jQuery插件,主要功能是上传文件,支持文件的批量上传、拖拽上传等,是一个易集成的多文件上传解决方案。 其前身Uploadify在很多项目中已被广泛之用,但是Uploadify需要Flash的...
基于Flash的多文件上传之jQuery插件(引入www.uploadify.com的Uploadify版本3.2.1版本),包括Flash源码: uploadify / uploadify.fla => Flash CS4的原始码 uploadify / => Flash Builder 4.6的ActionScript项目 ...
本文主要介绍了jQuery uploadify文件上传插件的使用方法,uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。具有很好的参考价值,需要的朋友一起来看下吧
jquery.uploadify插件是一个基于jquery来实现上传的,这个插件很好用,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器。但firefox、chrome不会这样做,他们会认为这样不安全,下面...
一次可选多个文件,操作快捷,代码解析详细。 jquery+flash插件,实现文件多选上传。 附件类型,大小,数量可控。 保存附件名称供进一步操作(如:保存附件名称至数据库)。
基于flash的文件批量上传,根据官网文档写的一个使用java的小例子,除了JDK,其他的所需自愿均存在
支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java…… 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展,...