您的位置：首页 > Web前端 > JQuery

jquery-file-upload demo

2014-08-18 22:23 162 查看

下载地址：http://plugins.jquery.com/blueimp-file-upload/文档地址：https://github.com/blueimp/jQuery-File-Upload/wiki本文只是一个demo,实现功能也很简单：点击一个上传按钮，用户选择图片，图片Ajax上传到后台存储到硬盘，返回一个连接，页面上显示用户上传的图片。（jquery-file-upload多文件上传可以做的非常漂亮，我这里有点大材小用了）注：demo页面为jsp，服务端为JavaspringMVC。页面代码：

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglibprefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/html">

<head>
<metacharset="UTF-8">
<title>fileuploaddemo</title>

<linkrel="stylesheet"href="<c:urlvalue='/resource/themes/bootstrap/css/bootstrap.min.css'/>">
<linkrel="stylesheet"href="<c:urlvalue='/resource/js/jQuery-File-Upload/css/jquery.fileupload.css'/>">
<scriptsrc="<c:urlvalue='/resource/js/jquery-1.9.1.min.js'/>"></script>
<scriptsrc="<c:urlvalue='/resource/js/jQuery-File-Upload/js/vendor/jquery.ui.widget.js'/>"></script>
<scriptsrc="<c:urlvalue='/resource/js/jQuery-File-Upload/js/jquery.iframe-transport.js'/>"></script>
<scriptsrc="<c:urlvalue='/resource/js/jQuery-File-Upload/js/jquery.fileupload.js'/>"></script>
<scriptsrc="<c:urlvalue='/resource/themes/bootstrap/js/bootstrap.min.js'/>"></script>

<scripttype="text/javascript">

$(function(){
varurl="/portal/upload/uploadImg.do";
$('#fileupload').fileupload({
url:url,
dataType:'text',
done:function(e,data){
console.dir(data);
$(".imgViewimg").attr('src','${contextPath}'+data.result);
$("#progress").hide();
$(".imgView").show();

},
progressall:function(e,data){
console.dir(data);
varprogress=parseInt(data.loaded/data.total*100,10);
$('#progress.progress-bar').css(
'width',
progress+'%'
);
}
});
});
</script>
</head>
<body>
<spanclass="btnbtn-successfileinput-button">
<iclass="glyphiconglyphicon-plus"></i>
<span>Selectfile.</span>
<!--Thefileinputfieldusedastargetforthefileuploadwidget-->
<inputid="fileupload"type="file"name="imgFile"/>
</span>
<br>
<br>
<!--Theglobalprogressbar-->
<divid="progress"class="progress">
<divclass="progress-barprogress-bar-success"></div>
</div>
<divclass="imgView"hidden="hidden">
<imgsrc="">
</div>
</body>
</html>

如果要自己写css那么只需以下四个js:jquery.min.js、jquery.ui.widget.js、jquery.iframe-transport.js、jquery.fileupload.js配置：对id为fileupload的fileinput进行fileupload实例化，url即为图片要上传到服务端的后台链接，也可以通过html5的属性data-url直接在input中给，input的name要给，或者通过配置paramName属性也是可以的。progressall是配置进度条的，done是上传到后台返回后的事件。Java代码：

importjava.io.IOException;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestParam;
importorg.springframework.web.bind.annotation.ResponseBody;
importorg.springframework.web.multipart.MultipartFile;
importcom.isoftstone.veco.common.base.controller.BaseController;
importcom.isoftstone.veco.common.upload.FileUploadHandler;

@RequestMapping("/upload")
@Controller
publicclassUploadControllerextendsBaseController
{
@RequestMapping("/uploadImg.do")
public@ResponseBody
StringuploadMaterialImg(@RequestParam("imgFile")MultipartFilemultipartFile)
{
Stringresp=null;
if(multipartFile!=null)
{
try
{
byte[]file=multipartFile.getBytes();
Stringdir="/test";
StringimgId=FileUploadHandler.uploadImg(file,dir);
resp=FileUploadHandler.UPLOAD_CONFIG.getImgVirtualDir()+"?"+FileUploadHandler.UPLOAD_CONFIG.getDownloadParamName()+"="
+imgId;
}catch(IOExceptione)
{
e.printStackTrace();
}
}
returnresp;
}

}

try中间的上传逻辑就不详细写了，controller这里写的有点挫，应该返回一个json格式的，判断上传是否成功，给用户反馈的，不过我这里只是一个demo，哈哈

补充：增加对上传图片格式的验证，以及对图片大小的验证，配置如下

$('#fileupload').fileupload({
url:url,
paramName:"imgFile",
acceptFileTypes:/(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize:5000000,//5MB
dataType:'text',
done:function(e,data){
console.dir(data);
$(".imgViewimg").attr('src','${contextPath}'+data.result);
$("#progress").hide();
$(".imgView").show();

},
progressall:function(e,data){
console.dir(data);
varprogress=parseInt(data.loaded/data.total*100,10);
$('#progress.progress-bar').css(
'width',
progress+'%'
);
},
messages:{
acceptFileTypes:'图片类型不合法',
maxFileSize:'图片大小超过限制'
}
}).on('fileuploadprocessalways',function(e,data){
varindex=data.index,
file=data.files[index];
if(file.error){
alert(file.error);
}

});

注：acceptFileTypes，maxFileSize这两个属性是jquery-file-upload中jquery.fileupload-validate.js中的，需要在进入两个js文件：jquery.fileupload-validate.js和jquery.fileupload-process.js在通过注册上传后台之前的事件fileuploadprocessalways来获取错误信息，如果不知道data中是什么可以通过console.dir(data);在浏览器debug控制台中查看

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航