利用ajax完成项目图册上传删除实际项目

Posted 2020-08-16 涤新云

【项目页面效果】

 

【前台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\',//接口url
17         type: \'post\',
18         secureuri: false, //一般设置为false
19         fileElementId: \'projectUploads\', // 上传文件的id、name属性名
20         dataType: \'text\', //返回值类型，一般设置为json、application/json
21         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();//用于删除img
52                      $(\'#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 class="pane" style="height: 600px">
                        <div class="in-btn">
                            <input type="text" style="display: none;" />
                        </div>
                        <div style="clear: both;"></div>
                
                        <form id="photoForm" action="/userCenter/userCenterProjectPhotoEdit.jspx" method="post">
                        <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>
                            <li style="display:none"></li>
                        <c:forEach items="${bean.cmsProjectPhotos}" var="photo">
                            <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>
                        </form>
                </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     }