利用ajaxfileupload.js异步上传文件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用ajaxfileupload.js异步上传文件相关的知识,希望对你有一定的参考价值。
1、引入ajaxfileupload.js
2、html代码
<input type="file" id="enclosure" name="enclosure"> <button id="upClick" >上传</button>
注意这里的input控件的id和name必须一致;这样在后台利用springMVC接受文件的时候能对应起来;
3、JS代码
<script type="text/javascript"> $(document).ready(function(){ $("#upClick").click(function(){ $.ajaxFileUpload( { url:‘MyMail/addEnclosure‘, secureuri:false, fileElementId:‘enclosure‘, //文件选择框的id和name要一样的名字 dataType: ‘json‘, success: function (data, status){
//这里的返回值利用JSON $(‘#filePath‘).val(data[‘filePath‘]); $(‘#result‘).html(data[‘message‘]); },error: function (data, status, e){ $(‘#result‘).html(data[‘message‘]); } } ); }); }); </script>
4、springMVC的controller
1 /*** 2 * 上传附件 3 * @return 4 */ 5 @RequestMapping("/addEnclosure") 6 public @ResponseBody String uploadFile(@RequestParam("enclosure") CommonsMultipartFile file){ 8 JSONObject object = new JSONObject(); 9 object.put("filePath", file.getOriginalFilename());10 String returnJson = ""; 11 try { 12 //使用ajaxfileupload.js异步上传文件,返回值乱码,重新编码处理 13 returnJson = new String(JSONObject.fromObject(object).toString().getBytes("utf-8"),"iso-8859-1"); 14 } catch (UnsupportedEncodingException e) { 15 e.printStackTrace(); 16 } 17 return returnJson; 18 }
以上是关于利用ajaxfileupload.js异步上传文件的主要内容,如果未能解决你的问题,请参考以下文章
jQuery ajaxFileUpload.js 文件异步ajax上传
ajaxfileupload.js实现无刷新异步上传图片Demo
JFinal+ajaxfileupload实现图片的异步上传