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();
　　}

}