jquery-file-upload demo
下载地址：http://plugins.jquery.com/blueimp-file-upload/
文档地址：https://github.com/blueimp/jQuery-File-Upload/wiki
本文只是一个demo,实现功能也很简单：点击一个上传按钮，用户选择图片，图片Ajax上传到后台存储到硬盘，返回一个连接，页面上显示用户上传的图片。
（jquery-file-upload多文件上传可以做的非常漂亮，我这里有点大材小用了）
注：demo 页面为jsp，服务端为Java springMVC。
页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>file upload demo</title> <link rel="stylesheet" href="<c:url value ='/resource/themes/bootstrap/css/bootstrap.min.css'/>"> <link rel="stylesheet" href="<c:url value ='/resource/js/jQuery-File-Upload/css/jquery.fileupload.css'/>"> <script src="<c:url value ='/resource/js/jquery-1.9.1.min.js'/>"></script> <script src=" <c:url value ='/resource/js/jQuery-File-Upload/js/vendor/jquery.ui.widget.js'/>"></script> <script src=" <c:url value ='/resource/js/jQuery-File-Upload/js/jquery.iframe-transport.js'/>"></script> <script src=" <c:url value ='/resource/js/jQuery-File-Upload/js/jquery.fileupload.js'/>"></script> <script src="<c:url value ='/resource/themes/bootstrap/js/bootstrap.min.js'/>"></script> <script type="text/javascript"> $(function () { var url = "/portal/upload/uploadImg.do"; $('#fileupload').fileupload({ url: url, dataType: 'text', done: function (e, data) { console.dir(data); $(".imgView img").attr('src','${contextPath}'+data.result); $("#progress").hide(); $(".imgView").show(); }, progressall: function (e, data) { console.dir(data); var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css( 'width', progress + '%' ); } }); }); </script> </head> <body> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Select file.</span> <!-- The file input field used as target for the file upload widget --> <input id="fileupload" type="file" name="imgFile"/> </span> <br> <br> <!-- The global progress bar --> <div id="progress" class="progress"> <div class="progress-bar progress-bar-success"></div> </div> <div class="imgView" hidden="hidden"> <img src=""> </div> </body> </html>
如果要自己写css
那么只需以下四个js:jquery.min.js、jquery.ui.widget.js、jquery.iframe-transport.js 、jquery.fileupload.js
配置：对id为fileupload 的file input 进行fileupload实例化，url即为图片要上传到服务端的后台链接，也可以通过html5的属性 data-url 直接在input中给，input的name要给，或者通过配置 paramName属性也是可以的。progressall是配置进度条的，done是上传到后台返回后的事件。
Java代码：
import java.io.IOException; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import com.isoftstone.veco.common.base.controller.BaseController; import com.isoftstone.veco.common.upload.FileUploadHandler; @RequestMapping("/upload") @Controller public class UploadController extends BaseController { @RequestMapping("/uploadImg.do") public @ResponseBody String uploadMaterialImg(@RequestParam("imgFile") MultipartFile multipartFile) { String resp = null; if (multipartFile != null) { try { byte[] file = multipartFile.getBytes(); String dir = "/test"; String imgId = FileUploadHandler.uploadImg(file, dir); resp = FileUploadHandler.UPLOAD_CONFIG.getImgVirtualDir() + "?" + FileUploadHandler.UPLOAD_CONFIG.getDownloadParamName() + "=" + imgId; } catch (IOException e) { e.printStackTrace(); } } return resp; } }
try中间的上传逻辑就不详细写了，controller这里写的有点挫，应该返回一个json格式的，判断上传是否成功，给用户反馈的，不过我这里只是一个demo，哈哈
补充：增加对上传图片格式的验证，以及对图片大小的验证，配置如下
$('#fileupload').fileupload({
url: url,
paramName:"imgFile",
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
dataType: 'text',
done: function (e, data) {
console.dir(data);
$(".imgView img").attr('src','${contextPath}'+data.result);
$("#progress").hide();
$(".imgView").show();
},
progressall: function (e, data) {
console.dir(data);
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
},
messages: {
acceptFileTypes: '图片类型不合法 ',
maxFileSize: '图片大小超过限制'
}
}).on('fileuploadprocessalways', function (e, data) {
var index = 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控制台中查看
