springMVC上传

首先 html 中 需要引入 

<script src="<%=basePath%>js/upload/ajaxfileupload.js" type="text/javascript"></script>


由于html 页面是 js 生成 所以 需要引入下面函数 生成

  /***
   * common  公用的 html 文件上传相关
   */
  function intixHtml(intiX)
  {
  var imgHtml='';
  imgHtml+='<div class="fileinput fileinput-new" data-provides="fileinput" style="float:left; display:inline;margin-left:20px;margin-right:20px;">';
  imgHtml+='<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width:34px; height: 34px;"><img src="" id="imgS'+intiX+'"> </div>';
  imgHtml+='</div> <div class="file"> <input type="file" name="btnFile" id="btnFile'+intiX+'"  onChange="fileUploadx('+intiX+');" >选择文件 </div> '; 
  return imgHtml;
  } 


上面的代码生成类似的页面,是多个单图上传功能,点击‘选择文件’按钮 触发fileUpload(numx)事件 其中 numx 是 一个随机数 和 input = file 的id相关联 


然后才是图片上传主函数,将 id =  btnFile+ numx 的input file 传入到后台

  
  /**
   * 图片上传
   * 
   * @param url
   * @date 2016年5月17日 下午4:57:09
   * @version 1.0.0
   */
  function fileUploadx(numX){
 
  var fileName = $("#btnFile"+numX+"").val();//文件名 
  console.log(fileName);
      $.ajaxFileUpload({  
          url:basePath+"userCenter.do?fileUpload",
          secureuri : false,//安全协议  
          fileElementId:'btnFile'+numX,//id  
          type : 'POST',  
          dataType : 'text',
          async : false,
          success : function(data) { 
               var start = data.indexOf(">");   
               if(start != -1) {   
                 var end = data.indexOf("<", start + 1);   
                 if(end != -1) {   
                   data = data.substring(start + 1, end);   
                  }   
               } 
               var ajax = jQuery.parseJSON(data);
               if(ajax.success){
              var vo = jQuery.parseJSON(ajax.attributes.vo);
              var path = vo.newFileName;//图片路径
              $("#imgS"+numX+"").attr("src",servicePath+path);
//             toastr.success(ajax.msg,'提示信息');  
            //submitFrom();
            }else{
            toastr.error(ajax.msg,'提示信息');    
            }
          }
          });  
      }


后台写法:

/**
* 单图片上传
*
* @param btnFile:传入文件
* @return
* @exception @date
*                2016年5月23日 上午11:40:43
* @version 1.0.0
*/
@RequestMapping(params = "fileUpload")
@ResponseBody
public void fileUpload(@RequestParam(value = "btnFile") MultipartFile btnFile, HttpServletRequest request,
HttpServletResponse response) {
AjaxJson j = new AjaxJson();
Map<String, Object> attr = new HashMap<>();
Gson gson = new Gson();
String vo = "";
JsonObject json = null;
try {
byte[] bytes = btnFile.getBytes();
String strByte = new String(bytes, "ISO-8859-1");
String fileName = btnFile.getOriginalFilename();
attr.put("fileName", fileName);
// 拼接上传fastdfs参数
Map<String, Object> paraMap = new HashMap<String, Object>();
paraMap.put("fileName", fileName);
paraMap.put("bytes", strByte);
String para = gson.toJson(paraMap);
// 保存图片到公用图片表
vo = fileServicePrx.uploadFile(para);
json = GsonUtil.parseJson(vo);
} catch (Exception e) {
vo = "{}";
logger.error("图片上传异常: " + e.getMessage());
e.printStackTrace();
j.setMsg("上传异常");
j.setSuccess(false);
json = GsonUtil.parseJson(gson.toJson(j));
}
responseJson(response, json);
}




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值