Ajax和formData的配合使用实现上传图片和图片的选中图片的展示不经过后台

1.首先我们先写了一个图片的上传的通方法

lic class UploadUtils {
    public static Map<String, String> uoLoadImage(MultipartFile oldFile,HttpSession session) {
        if (oldFile  != null) {
            Map<String, String> map = new HashMap<String, String>();
            String oldName = oldFile.getOriginalFilename();
              String path = session.getServletContext().getRealPath("/");//获取项目路劲名

            String type = oldName.substring(oldName.lastIndexOf(".") + 1);//获取后缀名
            if (oldFile != null) {
                if (type != null) {
                    if (("GIF".equals(type.toUpperCase()) || "PNG".equals(type.toUpperCase()) || "JPG".equals(type.toUpperCase()))) {
                        String trueName = System.currentTimeMillis() + Math.random() * 10 + "." + type; //随机数作为名称

                        File file = new File(path + "/upload/" + trueName);
                        // 判断父级目录是否存在,不存在则创建
                        if (!file.getParentFile().exists()) {
                            file.getParentFile().mkdir();
                        }
                        // 判断文件是否存在,否则创建文件(夹)
                        if (!file.exists()) {
                            file.mkdir();
                        }
                        try {
                            oldFile.transferTo(file);
                            map.put("info", "图片添加成功");
                            map.put("path", "/upload/" + trueName); //返回路劲 
                            return map;
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                }else{
                    map.put("info", "格式不正确");
                    return map;
                }
            }else{
                map.put("info", "文件夹为空!!!");
                return map;
            }
        }
        return null;
    }

接下来还是附带洗了一个图片的删除`

 public static Boolean delImage(String path ,HttpSession session){
        boolean delete = false;
        try {
            String realPath = session.getServletContext().getRealPath("/");
            File file =new File(realPath+path);
             delete = file.delete();
            return delete;
        }catch (Exception e) {

        }
        return delete;
    }`

接下来就是页面,一个form表单

 <form name="myForm"  method="post" id="myForm" enctype="multipart/form-data" >

ajax

var formData = new FormData($("#myForm" )[0]);
 $.ajax({
                url: '<%=path%>/tfsl/TFriendSL_addPic' ,
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false, //必须的
                processData: false, //必须的
                success: function (data) {
                    var info =  $.parseJSON(data);
                    var msg = info.msg;
                    if(msg == "true"){
                        var curId = window.parent.document.getElementById("curId").value;
                        var listWin = window.parent.document.getElementById("iframe"+curId);
                        var scope = listWin.contentWindow.angular.element('#Job_list').scope();
                        scope.searchList();
                        top.layer.alert(info.msgInfo, {icon: 6});
                        $("#btnmysave").addClass(" disabled");
                        $("#btnmysave").attr("disabled","disabled");
                        $scope.myreadonly = true;
                    }else{
                        top.layer.alert(info.msgInfo, {icon: 6});
                    }
                }
            });

这里就是一个图片的上传配合ajax和formData,下面是你选好图片的时候图片在页面的的显示

 $("#oldImage").bind('change',function () {
           $("#images").attr("src",URL.createObjectURL($(this)[0].files[0]));
           //  $("#images").css('display','block');
           $("#images").removeAttr("style");
       });

表单部分

<tr>
                    <td class="td-name" align="center">图片</td>
                    <td width="80%" class="tdright">
                        <img  style=" display: none" id="images" width="350" height="200"/>
                        <input type="file" name="oldImage" id="oldImage"/>
                    </td>
                </tr>


这样就可以达到显示的效果了,小白第一次写 见证自己的成长!!!
下面是Formdata的介绍和使用
https://blog.csdn.net/yezitoo/article/details/78339201

猜你喜欢

转载自blog.csdn.net/qq_40680694/article/details/81237061