file and data upload using ajax with spring mvc, jsp

Question

I am trying making code for file and some data uploading.....

but it is so hard for me..............!!!!!!!!

When I click "btn-upload" button, there is no response to my click..

and there is no error message on eclipse..

so I need help.. please help me.............

this is jsp

<script>
$("#btn-upload").on("click", function(event){
 event.preventDefault();
  var files = event.originalEvent.dataTransfer.files; 
  var file = files[0];
  var formData= new Formdata();
  var pName = $('#pName').val();
  var pPrice = $('#pPrice').val();

  formData.append("file",file);
  formData.append("pName",pName);
  formData.append("pPrice",pPrice);

 $.ajax({
       url:'/pupload',
       data: formData,
       dataType:'text',
       processData: false,
       contentType: false,
       type: 'POST',
       success: function(data){
           alert(data);
       }
 });
});
</script>
 <div>registering product</div>

<select name="pType" id="pType">
 <option value="pp">추천상품</option>
 <option value="bp">베스트상품</option>
 <option value="dp">할인상품</option>
</select>

  <form enctype="multipart/form-data">
             이미지 업로드<input type="file" name="pImage" id="pImage">
        상품명<input type="text" name="pName" id="pName">
        상품가격<input type="text" name="pPrice" id="pPrice">
        재고수량<input type="text" name="pStock" id="pStock">
        상품설명<input type="text" name="pDetail" id="pDetail">

             상품설명이미지<input type="file" name="dtImage" id="dtIamge"> 
             <input type="button" id="btn-upload" value="등록">
 </form>
</html>

this is the other jsp.

   <div class="col-md-6">
     <img src="displayFile?fileName=${fileName.fileName}" width="400" 
      height="400" align="right">

   </div>

and this is controller.java

//-get
@RequestMapping(value = "/pupload", method = RequestMethod.GET)
public String pUpload() {

    return "/admin/adProduct";
}

//-post
@ResponseBody
@RequestMapping(value = "/pupload", method = RequestMethod.POST, produces="text/plain;charset=UTF-8")
public ResponseEntity<String> pUpload2(MultipartFile file, Model model, ProductVO vo) throws Exception { 

    String fileName = file.getName();
    model.addAttribute("fileName", fileName);
        pservice.regist(vo);
   return new ResponseEntity<>(UploadFileUtils.uploadFile(uploadPath, file.getOriginalFilename(), file.getBytes()),
             HttpStatus.CREATED);
}

//displaying image
 @ResponseBody
 @RequestMapping("/displayFile")
 public ResponseEntity<byte[]> displayFile(String fileName) throws Exception{
     InputStream in = null;
     ResponseEntity<byte[]> entity = null;


     //logger.info("FILE NAME:"+fileName);

     try {
           String formatName = fileName.substring(fileName.lastIndexOf(".")+1);

           MediaType mType = MediaUtils.getMediaType(formatName);

           HttpHeaders headers = new HttpHeaders();


           in = new FileInputStream(uploadPath+fileName);

           if(mType!=null) {
               headers.setContentType(mType);
           }else {
               fileName = fileName.substring(fileName.indexOf("_")+1);
               headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
               headers.add("Content-Disposition", "attachement; 
filename=\""+new String(fileName.getBytes("UTF-8"), "ISO-8859-1")+"\"");
           }

        entity = new ResponseEntity<byte[]>(IOUtils.toByteArray(in), 
headers, HttpStatus.CREATED);   
     }catch(Exception e) {
         e.printStackTrace();
         entity = new ResponseEntity<byte[]>(HttpStatus.BAD_REQUEST);
     }finally {
        in.close();
     }

     return entity;
 }//displayFile

Kalaiselvan · Accepted Answer · 2017-11-29 12:26:38Z

1

//jquerypart 
formData.append("vo",{pName:pName,pPrice:pPrice});

 //java part

 @RequestMapping(value = "/pupload", method = RequestMethod.POST, produces="text/plain;charset=UTF-8")
 public ResponseEntity<String> pUpload2(@RequestParam String vo,@RequestParam(required = false) MultipartFile file, Model model) throws Exception { 

       String fileName = file.getName();
       model.addAttribute("fileName", fileName);
       ObjectMapper objectMapper=new ObjectMapper();
       ProductVo voc = objectMapper.readValue(vo, ProductVO.class); 
       pservice.regist(voc);
       return new ResponseEntity<>(UploadFileUtils.uploadFile(uploadPath,file.getOriginalFilename(), file.getBytes()),HttpStatus.CREATED);
}

if you don't want to send JSON

  formData.append("pName",pName);
  formData.append("pPrice",pPrice);


 @RequestMapping(value = "/pupload", method = RequestMethod.POST,produces="text/plain;charset=UTF-8")
 public ResponseEntity<String> pUpload2(@RequestParam String pName,@RequestParam String pPrice,@RequestParam(required = false) MultipartFile file, Model model) throws Exception { 
     ProductVO vo=new ProductVo();
      vo.setPName(pName);
      vo.setpPrice(pPrice);
       ......

  }

answered Nov 29, 2017 at 12:26

Kalaiselvan

2,1441 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wannadeve Over a year ago

Thank you for your comment~:)

Collectives™ on Stack Overflow

file and data upload using ajax with spring mvc, jsp

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related