jquery file upload使用

 

<!-- jquery file upload相关js -->

<script src="/js/jquery-file-upload/js/jquery.ui.widget.js"></script>
<script src="/js/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<script src="/js/jquery-file-upload/js/jquery.fileupload.js"></script>
<script src="/js/jquery-file-upload/js/jquery.fileupload-process.js"></script>
<script src="/js/jquery-file-upload/js/jquery.fileupload-validate.js"></script>
<link rel="stylesheet" href="/js/jquery-file-upload/css/jquery.fileupload.css">
<link rel="stylesheet" href="/js/jquery-file-upload/css/jquery.fileupload-ui.css">

 

$('#upload_cover').fileupload({
　　url: '/img/upload',
　　acceptFileTypes: /(\.|\/)(png)$/i,//文件后缀控制
　　maxNumberOfFiles: 1,//最大上传文件数目
　　maxFileSize: 50000,
　　dataType: 'json',//指望从服务器获得json类型的返回数据
　　messages : {//文件错误信息
　　acceptFileTypes : '文件类型不匹配',
　　maxFileSize : '文件过大',
　　},processfail: function (e, data) {
　　　　var currentFile = data.files[data.index];
　　　　if (data.files.error && currentFile.error) {
　　　　　　console.log(currentFile.error);
　　　　　　$('#error').text(currentFile.error);
　　　　}
　　},
　　done: function (e, data) {
　　　　$('#imgUrl').val(data.result.fileUrl);
　　　　$('#error').text("");
　　},
　　fail: function (e, data) {
　　　　$('#error').text("上传失败！"+data.files.error);
　　}
});

 

<!--html代码,样式使用bootstrap-->

<div class="form-group ">

　　<label class="control-label col-lg-2"></label>

　　<div class="col-sm-5">

　　　　<span class="btn btn-success fileinput-button">选择<input type="file" id="upload_cover" /></span>

　　　　 <font color="red" id="error"></font><br/>
　　</div>
</div>
<div class="form-group ">
　　<label class="control-label col-lg-2">imgUrl<font color="red">*</font></label>
　　<div class="col-lg-10">
　　　　<input type="text" name="imgUrl" id="imgUrl" class="form-control" placeholder="请选择" value="" readonly="readonly"/>
　　</div>
</div>

<!--服务端代码-->

@RequestMapping(value = "/img/upload", method = { RequestMethod.POST })
public void toUpload(HttpServletRequest request, HttpServletResponse response, ModelMap model) throws Exception {
　　// 建立一个通用的多部分解析器
　　CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
　　// 新建目录
　　String savePath = Constans.FILE_UPLOAD_PATH + Constans.IMG_FOLDER;
　　File directory = new File(savePath);
　　if (!directory.exists()) {
　　　　directory.mkdirs();
　　}
　　try {
　　　　// 判断 request 是否有文件上传,即多部分请求
　　　　if (multipartResolver.isMultipart(request)) {
　　　　　　// 转换成多部分request
　　　　　　MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
　　　　　　// 取得request中的全部文件名
　　　　　　Iterator<String> iter = multiRequest.getFileNames();
　　　　　　while (iter.hasNext()) {
　　　　　　　　// 取得上传文件
　　　　　　　　MultipartFile file = multiRequest.getFile(iter.next());
　　　　　　　　if (file != null) {
　　　　　　　　　　// 取得当前上传文件的文件名称
　　　　　　　　　　String myFileName = file.getOriginalFilename();
　　　　　　　　　　if (myFileName.trim() != "") {
　　　　　　　　　　　　// 定义上传路径
　　　　　　　　　　　　String tarpath = savePath + myFileName;
　　　　　　　　　　　　File localFile = new File(tarpath);
　　　　　　　　　　　　file.transferTo(localFile);
　　　　　　　　　　　　model.addAttribute("fileUrl", tarpath);
　　　　　　　　　　　　model.addAttribute("fileName", myFileName);
　　　　　　　　　　}
　　　　　　　　}

　　　　　　}

　　　　}
　　　　logger.info(">>> upload complete");
　　} catch (Exception e) {
　　　　e.printStackTrace();
　　　　logger.info(">>> upload error");
　　} finally {
　　　　response.setContentType("application/json; charset=utf-8");
　　　　response.setCharacterEncoding("utf-8");
　　　　PrintWriter pw = response.getWriter();
　　　　pw.print(new Gson().toJson(model));
　　　　pw.flush();
　　　　pw.close();
　　}

}