【使用JS提交表单文件时防止页面跳转 _第三方API调用 】 | IT修真院·坑乎
使用JS提交表单文件时防止页面跳转
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(1)
第三方API调用
详细描述
编辑于2024-11-24
  • [武汉|荣耀师兄]JAVA-刘欢
    0

    为了实现不跳转这里使用js 的formData来做表单提交并接收提交后的返回值. 

    jsp实现:

    <form id="image" method="post" enctype="multipart/form-data">
       <fieldset>
           <legend>头像更新</legend>
           <table table width="100%"
                  style="table-layout:fixed;word-break:break-all;background:#f2f2f2">
               <input type="hidden" name="id" value="${studentCustom.id}"/>
               <tr>
                   <td>当前头像</td>
                   <td>头像地址</td>
                   <td>更新</td>
                   <td>操作</td>
               </tr>
               <tr>
                   <td><img src="${studentCustom.headurl}width="50" height="50"
                            onerror="this.src='${pageContext.request.contextPath }/static/images/687.png'">
                   </td>
                   <td><input disabled value="${studentCustom.headurl}"></td>
                   <td>
                       <%-- 选择文件后在页面预览--%>
                       <img id="preview" width="50" height="50"
                            src="${studentCustom.headurl}"
                            onerror="this.src='${pageContext.request.contextPath }/static/images/687.png'"/>
                       <input type="file" name="item_pic" id="input_file"
                              accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                              onchange="imgPreview(this)">
                   </td>
                   <td><input type="button" value="提交onclick="doUpload(${studentCustom.id})"/></td>
               </tr>
           </table>
       </fieldset>
    </form>

    js:

    图像预览

    <script>
       function imgPreview(fileDom) {
           //判断是否支持FileReader
           if (window.FileReader) {
               var reader = new FileReader();
           else {
               alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
           }
           //获取文件
           var file fileDom.files[0];
           var imageType /^image\//;
           //是否是图片
           if (!imageType.test(file.type)) {
               alert("请选择图片!");
               return;
           }
           //读取完成
           reader.onload = function (e) {
               //获取图片dom
               var img document.getElementById("preview");
               //图片路径设置为读取的图片
               img.src e.target.result;
           };
           reader.readAsDataURL(file);
       }
    </script>

    提交:

    <script>
       function doUpload(id) {
           var formData = new FormData();
           // console.log($('#image'));
           formData.append("item_pic"$('#input_file').get(0).files[0]);
           $.ajax({
               url'/admin/updateFile/' id,
               type'POST',
               dataformData,
               async: false,
               cache: false,
               contentType: false,
               processData: false,
               success: function (returndata) {
                   if(returndata){
                       alert('头像上传成功');
                       window.location.reload();
                   }else alert('头像上传失败');
               },
               error: function (returndata) {
                   alert('连接失败');
               }
           });
       }
    </script>


    编辑于2018-06-08