最近选择上传组件,顺便总结一下这三个上传组件
1.ajaxFileUpload
网址:http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
适合当个文件的上传,多个文件的话,需要多个文件输入框
引入:jquery-1.9.1.js
ajaxfileupload.js
js部分:
function fileupload(){
if($("#filePath").val()==""){
alert_message("上传文件不能为空!");
return false;
}
var txtImg_url=$("#filePath").val().toLowerCase();
var txtImg_ext=txtImg_url.substring(txtImg_url.length-3,txtImg_url.length);
if (txtImg_ext!="png" && txtImg_ext!="gif" ){
alert_message("请选择png或gif格式的文件!");
$("#filePath").select();
$("#filePath").focus();
return false;
}
var imagefile = document.getElementById("filePath").files[0];
var size = imagefile.size/1024.0;
if (size > 300){
oms_message("图片大小不超过300K!");
return false;
}
$.ajaxFileUpload({
url:"sys/function/upload",//需要链接到服务器地址
secureuri:false,
fileElementId:"filePath",//文件选择框的id属性
dataType: 'text/xml', //也可以是json
success: function (data) {
alert_message("上传成功");
$('#myId').val(data);
},
error: function (data, status, e){
alert(e);
}
}
);
return false;
}
html部分:
<input name="imageurl" type="hidden" id="myId"/>
<input type="file" class="validate[required] text-input" name="filePath" id="filePath"/>
<input type="button" class="submit" name="fileLoad" id="fileLoad" value="上传" onClick="fileupload()"/>
Java代码部分:
@RequestMapping(value="/sys/function/upload",produces="text/plain;charset=UTF-8")
@ResponseBody
public String ajaxUpload(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException{
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
String fileName = "";
@SuppressWarnings("deprecation")
String path = request.getRealPath("/");
String realPath = "";
for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {
String key = (String) it.next();
MultipartFile imgFile = multipartRequest.getFile(key);
fileName = imgFile.getOriginalFilename();
File file = new File(path+fileName);
imgFile.transferTo(file);
realPath = path + fileName;
}
return realPath;
}
2.uploadify
demo:http://www.uploadify.com/demos/
引入:jquery-1.9.1.js、uploadify.css、jquery.uploadify.min.js
uploadify-flash版本:v2.2
js部分:
$('#fileInput').uploadify({
'swf' : 'js/uploadify/uploadify.swf',
'uploader' : 'sys/function/upload;jsessionid='+$('#sessionId').val(),
'buttonText' : '浏览...',
'uploadLimit' : 5,
'auto':false,
queueSizeLimit:1,
'progressData' : 'percentage'
});
html部分:
//加session是因为在firefox和chrome下上传失败,网上说是由于session失效导致,IE下没有问题
<input id="sessionId" type="text" value="${pageContext.session.id}"/>
<div>
<input type="file" name="fileInput" id="fileInput" />
<a href="javascript:$('#fileInput').uploadify('upload','*')">开始上传</a>
</div>
Java部分同上
3.jquery.MultiFile
jquery.MultiFile网址:http://www.fyneworks.com/jquery/multiple-file-upload/
jqueryform网址:http://jquery.malsup.com/form/#file-upload
引入:jquery-1.9.1.js、jquery.form.js、jquery.MultiFile.js
结合jqueryform实现ajax多文件上传
css部分:
<style>
.progress { position:relative; width:200px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
#funDetail td,#funDetail tr{ padding:4px; border:#333 1px solid; border-collapse:collapse; cellspacing:0px; }
.MultiFile-label{ position:absolute; top:75px; left:296px;}
</style>
js部分:
$('#uploadAdd').click(function(){
if ($('#filePath_wrap_list').html() == ""){
alert_message("请先上传文件再提交!");
return false;
}else {
$('#addUploadForm').submit();
}
});
$('#filePath').MultiFile({
accept:'gif|jpeg|png|jpg',
max:1,
STRING: {
remove:'移除',
selected:'已经选择了: $file',
denied:'不能选择: $ext!',
duplicate:'文件重复:\n$file!'
},
autoIntercept:['ajaxForm']
});
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('#addUploadForm').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
},
success: function(data) {
var percentVal = '100%';
bar.width(percentVal);
percent.html(percentVal);
$('#myId').val(data.msg);
$('input:file').MultiFile('reset');
},
complete: function(xhr) {
},
url:'sys/function/upload',
type:'post',
dataType:'json'
});
html部分:
<form id="addUploadForm" method="post" ENCTYPE="multipart/form-data">
<ul>
<li><label style="display:inline; float:left; height:30px; line-height:30px; width:90px; margin-left:70px;">图片路径:</label><input name="filePath" type="file" class="text-input" id="filePath" style="display:inline; padding-left:0px; margin-left:0px; float:left; clear:right; height:24px; padding-right:0px; margin-right:0px; width:280px;" size="27"/>
</li>
<li><input id="uploadAdd" class="submit" type="submit" value="上传" style="padding-left:0px; margin-left:0px; height:24px;"/></li>
<li>
<div class="progress" style="float:left; margin-top:14px; margin-left:160px; clear:both; width:264px;">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
</li>
</ul>
</form>
java部分:
基本同上,但是文件名是返回json格式
相关推荐
SWFUpload是一个基于flash与javascript的客户端文件上传组件。你可以在文件选择对话框中通过ctrl/shift键一次性选择多个上传文件。可以在所有事件中加入Javascript回调函数。可以在上传开始前取得文件信息。能够利用...
利用ajaxupload组件实现的图片上传 1、在部署该工程时,要...4、该上传组件上传图片时,产生的临时文件的名称较长,建议不要去更改,否则前台的操作十分麻烦,而且不一定能成功 5、删除功能,利用的是jquery的ajax方法
文件上传功能基于jquery uploadify+ajax+ashx+flash技术实现,功能庞大,并具有良好的移植性。其能够一次性选择多个文件上传,查看上传进度,控制文件上传类型和大小,限制上传数量,接受服务器反馈信息,为每一步...
分为前台和后台,后台定义一些公司、项目、人员(客户和工程师)报表统计等,前台主要是客户和工程师的一些关于uhd单据的填写回馈,查询,用到了ajax分页、ajax表单提交等,dom操作,主要应用jquery框架,js日历控件的...
jquery ajax上传组件JS. jquery-upload.min.js和jquery-1.11.0.min.js。 上传小文件图片,文件等非常合适。 详情可参考:http://blog.csdn.net/programmer_sir/article/details/29570935
swfupload是比较著名的图片上传工具,可以多图片上传,在一次开发中偶遇uploadify,比swfupload还强大好用,选项也很丰富,功能也很强大,再配合ajax技术,可以把多图片上传发挥到极致,我曾用它做多图片上传,上传...
所有操作均为ajax操作 支持: 文件上传、下载、在线编辑、在线新建文件、新建文件夹、类似windows资源管理器的文件管理。文件压缩(gzip压缩)、文件解压缩(gzip)
Fine Uploader 是一个采用Ajax技术实现的文件上传组件,支持拖拽文件上传。使用很简便,只需在页面中引入相应的CSS+JavaScript,不需要jquery或flash支持,支持后台多种语言,包括:ASP.NET, ColdFusion, Java, Node....
运用Jquery和swf上传组件结制作的上传组件 支持大附件上传,3G不成问题
我这里使用的是AjaxFileUploader这个组件,服务器使用Struts处理文件。 实例: <form action="" id="imageForm" enctype="multipart/form-data" method="POST"> <input type="file" name="userPhoto" ...
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid...filebox:filebox 该组件表单元素中用于上传文件的文件框工具组件
闲来无事,做了个基于ASP.Net的Ajax技术的文件上传,这个上传代码实现了浏览器无刷新,实时显示上传进度,可限制上传文件大小和上传的文件类型。例子中的代码是单个文件上传,如果读懂了代码并稍微研究一下,用这个...
一对多块表操作的的三种方式 增加一对多数据示例 初识Ajax Ajax内容基本整理 编辑一对多示例 创建多对多以及增加示例 本节内容梳理 本周作业 第21周 今日知识点概要 上节内容回顾以及URL的补充 视图获取用户请求...
jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会组织用户在页面进行的操作,直到插件被关闭。
这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/download_project_version.php?version_id=6 服务器端采用struts2来处理文件上传。 所需环境: jquery.js ajaxfileupload.js struts2...
本内容主要为JQuery框架及相应组件的使用,主要包括Ajax的使用,验证框架和文件上传
的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面,而是要不断地通过ajax获取...
Ajax+Flash多文件上传是一个开源的上传组件,名称是FancyUpload,其官方网址是:http://digitarald.de/project/fancyupload/。这个组件仅仅是客户端的应用组件,即与任何服务器端的技术没有关系,服务器端可以采用...