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

【项目页面效果】

 

【前台jsp页面】

jsp的js代码

<script type="text/javascript">
//上传项目图片
function uploads(){
     uploadImgs();
}
function uploadImgs(){

    //loading
    $("#loading").ajaxStart(function() {
        $(this).show();
    }).ajaxComplete(function() {
        $(this).hide();
    });
    var elementIds=["flag"]; //flag为id、name属性名
    $.ajaxFileUpload({
        url: '/file/uploads.jspx',//接口url
        type: 'post',
        secureuri: false, //一般设置为false
        fileElementId: 'projectUploads', // 上传文件的id、name属性名
        dataType: 'text', //返回值类型，一般设置为json、application/json
        elementIds: elementIds, //传递参数到服务器
        success: function(data, status){  
            var temp =  $.parseJSON(data);
            var fileUrl = temp.fileUrl;
            $("#photourls").val(fileUrl);
            
             $.ajax({
                 type: "GET",
                 url: "${ctx}/cmscp/core/project/apply/uploadPhoto.do",
                 data: {url:fileUrl,projectId:$('#beanid').val()},
                 dataType: "json",
                 success: function(data){
                     $(".imageTipss").append("<img id=\""+data+"\" height=\"100\" width=\"100\" src=\""+fileUrl+"\"></img><a id=\"a"+data+"\" onclick=delphoto("+data+")>&nbsp;&nbsp;删除</a>");
                 }
            });
           
           // alert("上传成功！");
        },
        error: function(data, status, e){ 
            alert(e);
        }
    });
}
    function delphoto(id){
         $.ajax({
                type: "GET",
                 url: "${ctx}/cmscp/core/project/apply/deletePhoto.do",
                 data: {id:id},
                 dataType: "json",
                 success: function(data){
                     $('#'+id).remove();//用于删除img
                     $('#a'+id).remove();//对应正在上传内容为删除a标签   或者对于已有图片删除的是li  改行代码目的删除两个文字：“删除”

                     // $(".imageTipss").append("<img height=\"100\" width=\"100\" src=\""+fileUrl+"\"></img><a onclick=delphoto("+data+")>删除</a> ");
                 }
            });
    }
</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

    @RequestMapping( value = "/file/uploads.jspx", method = RequestMethod.POST )
    public void avatarUploads( @RequestParam( value = "projectUploads", required = false ) MultipartFile file,
            HttpServletRequest request, HttpServletResponse response, org.springframework.ui.Model modelMap ) {
        JsonMapper mapper = new JsonMapper();
        UploadResult result = new UploadResult();
        try {
            doAvatarUpload( file, result, request, response );
        }
        catch( Exception e ) {
            logger.error( "upload avatar image error.", e );
            result.setError( e.getMessage() );
        }
        String json = mapper.toJson( result );
        logger.debug( json );
        Servlets.writeHtml( response, json );
        return;
    }

第二个ajax的后台方法  该方法用于保存数据到保存图片附件的单表数据库 并返回每条记录

    @RequestMapping("/apply/uploadPhoto.do")
    @ResponseBody
    public void uploadPhoto(Integer projectId ,String url ,HttpServletRequest request,HttpServletResponse response, org.springframework.ui.Model modelMap){
        //CmsProjectNew project =  cmsProjectNewService.findOne(projectId);
        CmsProjectPhoto phote = new CmsProjectPhoto();
        //phote.setCmsProjectNew(project);
        phote.setProjectId(projectId);
        phote.setPhotourl(url);
        photoService.save(phote);
        try {
            PrintWriter pw = response.getWriter();
            pw.print(phote.getId());
            pw.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }