양식 양식에 이미지를 제출할 때 발생하는 문제 분석
- 零下一度원래의
- 2018-05-14 11:49:192107검색
문제:
최근 프로젝트를 진행하면서 점프하지 않고 사진을 업로드하고 반환 정보를 받아야 하는 상황에 직면했습니다.
아이디어:
1. ajax를 사용하여 비동기 요청을 보낸 후 마침내 종료되었습니다. Failed
2. iframe에서 점프를 금지합니다(시도하지 않음)
3. 양식 태그에서 제출 요청 논리를 수정합니다
구현: (아이디어 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>
코드 보기
2. 다른 스타일 파일은 여기에 요약되어 있지 않습니다.
위 내용은 양식 양식에 이미지를 제출할 때 발생하는 문제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.