利用ajax完成項目圖冊上傳刪除【實際項目】

標籤：傳遞參數   integer   ipa   ring   framework   require   代碼   complete   tip   

【項目頁面效果】

 

【前台jsp頁面】

jsp的js代碼

 1 <script type="text/javascript"> 2 //上傳項目圖片 3 function uploads(){ 4      uploadImgs(); 5 } 6 function uploadImgs(){ 7  8     //loading 9     $("#loading").ajaxStart(function() {10         $(this).show();11     }).ajaxComplete(function() {12         $(this).hide();13     });14     var elementIds=["flag"]; //flag為id、name屬性名稱15     $.ajaxFileUpload({16         url: ‘/file/uploads.jspx‘,//介面url17         type: ‘post‘,18         secureuri: false, //一般設定為false19         fileElementId: ‘projectUploads‘, // 上傳檔案的id、name屬性名稱20         dataType: ‘text‘, //傳回值類型，一般設定為json、application/json21         elementIds: elementIds, //傳遞參數到伺服器22         success: function(data, status){  23             var temp =  $.parseJSON(data);24             var fileUrl = temp.fileUrl;25             $("#photourls").val(fileUrl);26             27              $.ajax({28                  type: "GET",29                  url: "${ctx}/cmscp/core/project/apply/uploadPhoto.do",30                  data: {url:fileUrl,projectId:$(‘#beanid‘).val()},31                  dataType: "json",32                  success: function(data){33                      $(".imageTipss").append("<img id=\""+data+"\" height=\"100\" width=\"100\" src=\""+fileUrl+"\"></img><a id=\"a"+data+"\" onclick=delphoto("+data+")>&nbsp;&nbsp;刪除</a>");34                  }35             });36            37            // alert("上傳成功！");38         },39         error: function(data, status, e){ 40             alert(e);41         }42     });43 }44     function delphoto(id){45          $.ajax({46                 type: "GET",47                  url: "${ctx}/cmscp/core/project/apply/deletePhoto.do",48                  data: {id:id},49                  dataType: "json",50                  success: function(data){51                      $(‘#‘+id).remove();//用於刪除img52                      $(‘#a‘+id).remove();//對應正在上傳內容為刪除a標籤   或者對於已有圖片刪除的是li  改行代碼目的刪除兩個文字：“刪除”53 54                      // $(".imageTipss").append("<img height=\"100\" width=\"100\" src=\""+fileUrl+"\"></img><a onclick=delphoto("+data+")>刪除</a> ");55                  }56             });57     }58 </script>

jsp的html代碼

說明：

            <div id="sec_pane" class="pane" style="height: 600px">                                        <input type="hidden" name="projectId" value="${bean.id}"/>                        <div class="in-btn">                        </div>                        <input type="hidden" id="photourls" name="photourls" />                        <input type="file" id="projectUploads" name="projectUploads" onchange="uploads();"                            style="width:73px; padding: 20px 0 20px 50px;"/>                            (請上傳規格為260*188像素大小的圖片)                        <input type="hidden" id="flag" name="flag" value=""/>                        <div class="imageTipss" style="padding-left: 20px;"></div>                                            <ul>                        <c:forEach items="${bean.cmsProjectPhotos}" var="photo">                            <li style="display:none"></li>//加入一個隱藏li的目的：是為了當刪除第一個li時，防止頁面自動跳轉到第一個tab頁面                            <li id="a${photo.id}" style="float: left;width: 120px;margin:82px 22px 20px 12px; padding:0 0 30px 0;" >                            <img id="${photo.id}" style="width: 120px;height: 120px" src="${photo.photourl}" />                            <p ><a href="javascript:void(0)" onclick="delphoto(‘${photo.id}‘)">刪除</a>                            <input type="hidden" name="photoList[${photo_index}].photourl" value="${photo.photourl}"/>                            <input type="hidden" name="photoList[${photo_index}].id" value="${photo.id}"/>                            </p>                            </li>                        </c:forEach>                        </ul>            </div>

【後台代碼】

第一個ajax的後台方法  該方法用於上傳圖片並返回圖片url

 1     @RequestMapping( value = "/file/uploads.jspx", method = RequestMethod.POST ) 2     public void avatarUploads( @RequestParam( value = "projectUploads", required = false ) MultipartFile file, 3             HttpServletRequest request, HttpServletResponse response, org.springframework.ui.Model modelMap ) { 4         JsonMapper mapper = new JsonMapper(); 5         UploadResult result = new UploadResult(); 6         try { 7             doAvatarUpload( file, result, request, response ); 8         } 9         catch( Exception e ) {10             logger.error( "upload avatar image error.", e );11             result.setError( e.getMessage() );12         }13         String json = mapper.toJson( result );14         logger.debug( json );15         Servlets.writeHtml( response, json );16         return;17     }

第二個ajax的後台方法  該方法用於儲存資料到儲存圖片附件的單表資料庫 並返回每條記錄

 1     @RequestMapping("/apply/uploadPhoto.do") 2     @ResponseBody 3     public void uploadPhoto(Integer projectId ,String url ,HttpServletRequest request,HttpServletResponse response, org.springframework.ui.Model modelMap){ 4         //CmsProjectNew project =  cmsProjectNewService.findOne(projectId); 5         CmsProjectPhoto phote = new CmsProjectPhoto(); 6         //phote.setCmsProjectNew(project); 7         phote.setProjectId(projectId); 8         phote.setPhotourl(url); 9         photoService.save(phote);10         try {11             PrintWriter pw = response.getWriter();12             pw.print(phote.getId());13             pw.close();14         } catch (IOException e) {15             e.printStackTrace();16         }17     }

 

利用ajax完成項目圖冊上傳刪除【實際項目】