• 在項目中，上傳文件一般是必不可少的，所以今天學到新的上傳方式，就幹脆將學習過的上傳方式記錄一下

  一、表單直接上傳圖片

• 表單頭要設置

  <form action="" method="post" enctype="multipart/form-data">

• 元素

  <input type="file" name="dwfile" >

• 後端代碼

  @RequestMapping(value="addDownload",method=RequestMethod.POST)
  public String addDownload(HttpServletRequest request,Model model,download download)throws
   
   Exception{
      log.info("上傳文件");
      try{
           String fileName = download.getDwfile().getOriginalFilename();  
             System.out.println("原始文件名:" + fileName); 
             // 新文件名  
             //String newFileName = UUID.randomUUID() + fileName;         
             // 獲得項目的路徑  
             ServletContext sc = request.getSession().getServletContext();  
             
   
  // 上傳位置  
             String path = sc.getRealPath("/upload") + "/"; // 設定文件保存的目錄  
             System.out.println(path);
             File f = new File(path);  
             if (!f.exists())  
                 f.mkdirs();  
             if (!download.getDwfile().isEmpty()) {  
                     FileOutputStream fos 
   
  = new FileOutputStream(path + fileName);  
                     InputStream in = download.getDwfile().getInputStream();  
                     int b = 0;  
                     while ((b = in.read()) != -1) {  
                         fos.write(b);  
                     }  
                     fos.close();  
                     in.close();  
             }  
            download.setDwFile(fileName);
            downloadService.insertSelective(download);
          
          }catch(Exception e){
           System.out.println(e);
       }
          return "redirect:showDownload";
  }

  二、使用ajax上傳

• 

• 1.通過jquery的插件jquery.form.js

• jsp頁面代碼

  <form id="form111" name="form111" action="${path }/brand/addBrand.do" method="post" enctype="multipart/form-data">
  <input type=‘file‘ size=‘27‘ id=‘imgsFile‘ name=‘imgsFile‘ class="file" onchange=‘submitUpload()‘ />
  
  

• js代碼

  <script type="text/javascript" src="<c:url value=‘/{system}/res/js/jquery.form.js‘/>"></script> 
  function submitUpload(){ 
  var option = { url:"{path}/upload/uploadPic.do",//如果不指定url那麽就使用使用提交表單的url，如果指定就使用當前的url
  dataType:"text",
  success:function(responseText){
  var jsonObj = .parseJSON(responseText);("#imgsImgSrc").attr("src", jsonObj.realPath);
  $("#imgs").val(jsonObj.relativePath);
  
        },
        error:function(){
            alert("系統錯誤");
        }
  };
  $("#form111").ajaxSubmit(option);
  
  }

• 後端接收

  @RequestMapping("/uploadPic.do")
  public void uploadPic(HttpServletRequest request, Writer out) throws IOException{
  //把request轉換成復雜request
  MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
  //獲得文件
  Map<String, MultipartFile> map = mr.getFileMap();
  Set<String> set = map.keySet();
  Iterator<String> it = set.iterator();
  String fileInputName = it.next();
  MultipartFile mf = map.get(fileInputName);
  //獲得文件的字節數組
  byte [] bs = mf.getBytes();
  String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
  Random random = new Random();
  for(int i = 0; i < 3; i++){
  fileName = fileName + random.nextInt(10);
  }
  
    String oriFileName = mf.getOriginalFilename();
    //獲得文件的後綴
    String suffix = oriFileName.substring(oriFileName.lastIndexOf("."));
    //獲得上傳文件的絕對路徑(上傳和展示)
    String realPath = ECPSUtils.readProp("file_path")+"/upload/"+fileName+suffix;
    //獲得相對路徑(存儲在數據庫)
    String relativePath = "/upload/"+fileName+suffix;
    //創建jersy的客戶端
    Client client = Client.create();
    //創建web資源對象
    WebResource wr = client.resource(realPath);
    //上傳
    wr.put(bs);
    JSONObject jo = new JSONObject();
    jo.accumulate("realPath", realPath);
    jo.accumulate("relativePath", relativePath);
    String result = jo.toString();
    out.write(result);
  }

  2.使用FormData對象

• 這種還沒有使用過，以後研究

  ajax基本使用json數據

ssm項目中常用的上傳文件