ajax提交formData iframe springmvc 上传文件页面是通过iframe嵌入的html

Posted 2020-11-08 chimo123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax提交formData iframe springmvc 上传文件页面是通过iframe嵌入的html相关的知识，希望对你有一定的参考价值。

1.引入讲个jar包 springmvc设置

commons-fileupload-1.3.3.jar

commons-io-2.5.jar

    <!-- 定义文件解释器 -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设置默认编码 -->
        <property name="defaultEncoding" value="utf-8"></property>
        <!-- 文件大小最大值 -->
        <property name="maxUploadSize" value="10485760000" />
        <!-- 内存中的最大值 -->
        <property name="maxInMemorySize" value="40960" />
    </bean>

2.html 对file做了css美化点击按钮可以清空file

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>新增地名标志</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css" type="text/css"/>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/bootstrap-datetimepicker.js"></script>
    <script src="js/bootstrap-datetimepicker.zh-CN.js"></script>

    <script src="js/table.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="../../js/jquery.tips.js"></script>
    <script src="js/hint.js"></script>
    <style>
    .readonly{
    background-color: rgb(242, 242, 242);
    }

    /*a  upload */
.a-upload {
    padding: 4px 10px;
    height: 36px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}
.close-upimg:hover {
    background-color: blue;
}
    
    </style>

</head>
<body>
    <form id="dmbz">
        <table class="table table-bordered table-hover">
            <tr>
                <td class="danyuange">标志文件上传</td>
                <td colspan="7">
                    <a href="javascript:;" id="a-upload"class="a-upload" style="float:left;">
                        <input type="file" id=‘file21‘ name="zhaopianwenjianming" onchange="showPreview(this)">点击这里上传文件
                    </a> 
                    <div class=fileImgDel style="height:36px;float:left;line-height: 36px;">
                        <span  class=‘show‘ name="show" style=‘float:left;height:36px;margin-left: 10px;‘></span>
                        <img src=‘../../img/del.png‘ class=‘close-upimg‘ id=‘close-upimg‘ onclick="delFile()" style=‘float:left;position:relative;top:10px;‘>
                    </div>
                </td>
            </tr>
          
        </table>
    </form>

</body>
</html>
 
<script type="text/javascript">
function showPreview(source) {
    $(".fileImgDel").empty();
    $(".fileImgDel").append("<span  class=‘show‘ name=‘show‘ style=‘float:left;height:36px;margin-left: 10px;‘></span>"
    +"<img src=‘../../img/del.png‘ class=‘close-upimg‘ id=‘close-upimg‘ onclick="
    +"delFile()"
    +" style=‘float:left;position:relative;top:10px;‘>");
    var arrs = $(source).val().split(‘\\‘); 
    var filename=arrs[arrs.length-1]; 
    $(".show").text(filename);
}
function delFile(){
    $(".fileImgDel").empty();
    document.getElementById("a-upload").innerHTML="<input type=‘file‘ id=‘file21‘ name=‘zhaopianwenjianming‘ onchange=‘showPreview(this)‘>点击这里上传文件";
     $(".fileImgDel").append("<span  class=‘show‘ name=‘show‘ style=‘float:left;height:36px;margin-left: 10px;‘></span>"
    +"<img src=‘../../img/del.png‘ class=‘close-upimg‘ id=‘close-upimg‘ onclick="
    +"delFile()"
    +" style=‘float:left;position:relative;top:10px;‘>");
    //var biaozhidaima=$("#biaozhidaima").val();
}

</script>

3.ajax提交

function placeMark_Save(){
    var ss2,fd;
    if(!!window.ActiveXObject || "ActiveXObject" in window){//判断浏览器是否为IE11
        //alert(‘是IE！‘)
        ss2 = $("#dmbz", window.frames[‘iframe_bz‘].document);
    }else{
        //alert(‘非IE！‘)
        ss2 = $("#dmbz", window.frames[‘iframe_bz‘].contentDocument);
    }
    //-----------------------------------------------------formdata
    if (action == "add") {
        fd = new FormData(ss2[0]);
        fd.append("id","0");//新增formdata元素
        fd.append("uuid","");
        fd.append("diminguuid",dmInfo.guid);
        fd.append("action","add");
    }else{
        fd = new FormData(ss2[0]);
        fd.append("action","edit");
        fd.append("uuid",uuid_biaozhi);
    }
//ajax提交
     $.ajax({
         url: ‘placeName/biaoZhiSave.do‘,
         type: ‘POST‘,
         datatype: ‘json‘,
         data: fd,
         cache:false,
         traditional: true,
         contentType: false,
         processData: false,
         success : function(data) {
                if (data) {
                    placeMarkTable_Close();// 成功后才能关闭对话框
                    jQuery(placeMark_Table).jqGrid(‘setGridParam‘, {
                                url : ‘placeName/biaozhiInit.do‘
                            }).trigger(‘reloadGrid‘);
                } else {
                    $("#markBtn").tips({
                                side : 1,
                                msg : "数据保存失败!",
                                bg : ‘#FF5080‘,
                                time : 5
                            });
                }
            }
            
        });
}

4.Controller.java文件

        @RequestMapping(value = "/biaoZhiSave")
        public void biaoZhiSave(@RequestParam(value = "zhaopianwenjianming", required = false)MultipartFile zhaopianwenjianming,
                HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException{
            String newUuid = "";
            String action = request.getParameter("action");// 操作符
            String fileName=request.getParameter("biaozhidaima");//标志代码---作为文件名

            JSONObject jsonData=new JSONObject();//将传入的数据转为json对象
            Map<String,String[]> paramMap = request.getParameterMap();
            for(String name : paramMap.keySet()) {
            String[] values = paramMap.get(name);
            jsonData.put(name, StringUtils.join(values));
            }
//保存图片
            if (!zhaopianwenjianming.isEmpty()) {//如果有图片
                //保存到服务器WEB-INF\\upload目录下
                String realPath = request.getSession().getServletContext().getRealPath("/WEB-INF/upload");   
                String ext = FilenameUtils.getExtension(zhaopianwenjianming.getOriginalFilename());//文件后缀名
                zhaopianwenjianming.transferTo(new File(realPath+"\\"+ fileName + "." + ext));
                jsonData.put("zhaopianwenjianming",fileName + "." + ext);

                //保存文件到D:\\upload目录下
               /* String ext = FilenameUtils.getExtension(zhaopianwenjianming.getOriginalFilename());//文件后缀名
                zhaopianwenjianming.transferTo(new File("D:\\upload\\" + fileName + "." + ext));
                jsonData.put("zhaopianwenjianming",fileName + "." + ext);*/
            }

        }

以上是关于ajax提交formData iframe springmvc 上传文件页面是通过iframe嵌入的html的主要内容，如果未能解决你的问题，请参考以下文章

Ajax上传文件

ajax利用FormData异步文件提交

FormData的使用以及用ajax提交

ajax+FormData+javascript实现无刷新表单信息提交

通过 Ajax 提交表单 - FormData 始终为空 [重复]

formdata,ajax提交数据

ajax提交formData iframe springmvc 上传文件 页面是通过iframe嵌入的html

ajax提交formData iframe springmvc 上传文件页面是通过iframe嵌入的html