form表單提交圖片遇到的問題分析
- 零下一度原創
- 2018-05-14 11:49:192107瀏覽
問題：
最近在做專案時，遇到上傳圖片需求，且在不跳躍的情況下取得到回傳資訊
想法：
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?1.1.11">
14 <script src="js/rem.js?1.1.11"></script>
15 </head>
16 <body>
17 <p class="upload">
18 <h1>上传赛事气象新闻</h1>
19 <p class="content">
20 <p class="label">标题：</p>
21 <input type="text" name="title" id="title">
22 <p class="label">内容：</p>
23 <textarea id="detail"></textarea>
24 <p class="label">图片：</p>
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 </p>
38 </p>
39 </body>
40 </html>
41 <script src="js/jquery-1.10.1.min.js?1.1.11"></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.png88 </script>
View Code
########################################################## ###2. 其他樣式檔案此處不做概述。 ###以上是form表單提交圖片遇到的問題分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn