最近选择上传组件，顺便总结一下这三个上传组件
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格式