form表单提交图片禁止跳转
Posted 兔子牙
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了form表单提交图片禁止跳转相关的知识，希望对你有一定的参考价值。
问题：
最近在做项目时，遇到上传图片需求，且在不跳转的情况下获取到返回信息
思路：
1. 使用ajax发送异步请求，经多次测试，最终以失败告终
2. iframe 禁止跳转（未尝试）
3. 修改form标签内提交请求逻辑
实现：（思路3）
1. html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <meta name="format-detection" content="telephone=no"> 9 <meta http-equiv="Expires" content="-1"> 10 <meta http-equiv="Cache-Control" content="no-cache"> 11 <meta http-equiv="Pragma" content="no-cache"> 12 <title>上传赛事气象新闻</title> 13 <link rel="stylesheet" href="css/uploadnews.css"> 14 <script src="js/rem.js"></script> 15 </head> 16 <body> 17 <div class="upload"> 18 <h1>上传赛事气象新闻</h1> 19 <div class="content"> 20 <div class="label">标题：</div> 21 <input type="text" name="title" id="title"> 22 <div class="label">内容：</div> 23 <textarea id="detail"></textarea> 24 <div class="label">图片：</div> 25 <form class="fupload" method="POST" action="http://tianjinqixiang.tianqi.cn:8080/tjqyh/testUploadFiles" enctype="multipart/form-data" > 26 <input type="submit" value="上传" class="upload_button"> 27 <br> 28 <input type="file" name="file" value="选择图片" class="choose_img"> 29 <br> 30 <input type="file" name="file" value="选择图片" class="choose_img"> 31 <br> 32 <input type="file" name="file" value="选择图片" class="choose_img"> 33 <br> 34 <input type="file" name="file" value="选择图片" class="choose_img"> 35 </form> 36 <input type="button" value="提交" id="upButton"> 37 </div> 38 </div> 39 </body> 40 </html> 41 <script src="js/jquery-1.10.1.min.js"></script> 42 <script> 43 var imgURL = ‘‘; 44 // 表单提交不进行跳转获取返回数据 45 $(‘form‘).submit(function (event) { 46 event.preventDefault(); 47 var form = $(this); 48 if (!form.hasClass(‘fupload‘)) { 49 //普通表单 50 $.ajax({ 51 type: form.attr(‘method‘), 52 url: form.attr(‘action‘), 53 data: form.serialize() 54 }).success(function () { 55 56 }).fail(function (jqXHR, textStatus, errorThrown) { 57 //错误信息 58 }); 59 } 60 else { 61 // mulitipart form,如文件上传类 62 var formData = new FormData(this); 63 $.ajax({ 64 type: form.attr(‘method‘), 65 url: form.attr(‘action‘), 66 data: formData, 67 mimeType: "multipart/form-data", 68 contentType: false, 69 cache: false, 70 processData: false 71 }).success(function (yy) { 72 alert(‘上传成功‘) 73 imgURL = yy 74 }).fail(function (jqXHR, textStatus, errorThrown) { 75 //错误信息 76 }); 77 }; 78 }); 79 $("#upButton").click(function(){ 80 upMessage(imgURL) 81 }) 82 function upMessage(imgdata){ 83 var title = $(‘#title‘).val() 84 var content = $(‘#detail‘).val() 85 window.location.href=‘./userInfo/newseditor?title=‘+title+‘&content=‘+content+‘&sitepng=‘+imgdata 86 } 87 // http://127.0.0.1:8080/userInfo/newseditor?title=气象新闻测试周刊&content=今天晴转龙卷风&sitepng=/home/wangxinyu/news/11B01_red.png 88 </script>
2. 其他样式文件此处不做概述。
3. 参考网址：
以上是关于form表单提交图片禁止跳转的主要内容，如果未能解决你的问题，请参考以下文章