首页 > 代码库 > form表单提交图片禁止跳转

form表单提交图片禁止跳转

2024-10-03 09:49:02   218人阅读

问题： 

最近在做项目时，遇到上传图片需求，且在不跳转的情况下获取到返回信息

思路：

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="http://www.mamicode.com/css/uploadnews.css">
14   <script src="http://www.mamicode.com/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="http://www.mamicode.com/上传" class="upload_button">
27         <br>
28         <input type="file" name="file" value="http://www.mamicode.com/选择图片" class="choose_img">
29         <br>
30         <input type="file" name="file" value="http://www.mamicode.com/选择图片" class="choose_img">
31         <br>
32         <input type="file" name="file" value="http://www.mamicode.com/选择图片" class="choose_img">
33         <br>
34         <input type="file" name="file" value="http://www.mamicode.com/选择图片" class="choose_img">
35       </form>
36       <input type="button" value="http://www.mamicode.com/提交" id="upButton">
37     </div>
38   </div>
39 </body>
40 </html>
41 <script src="http://www.mamicode.com/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 = http://www.mamicode.com/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=http://www.mamicode.com/‘./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>
View Code

2. 其他样式文件此处不做概述。

3. 参考网址：

天津十三运

form表单提交图片禁止跳转


联系
我们