"/> ">
suchen

Heim >Web-Frontend >js-Tutorial >Analyse der Probleme, die bei der Übermittlung von Bildern in Formularformularen aufgetreten sind

Analyse der Probleme, die bei der Übermittlung von Bildern in Formularformularen aufgetreten sind

零下一度
零下一度Original
2018-05-14 11:49:192107Durchsuche

Problem:

Als ich kürzlich an einem Projekt arbeitete, stieß ich auf die Notwendigkeit, Bilder hochzuladen und die Rückgabeinformationen zu erhalten, ohne zu springen

Ideen:

1 . Verwenden Sie Ajax, um asynchrone Anfragen zu senden.

2. Iframe verhindert Sprünge (nicht ausprobiert)

3 Ändern Sie die Anforderungsübermittlungslogik im Formular-Tag.

🎜>Implementierung: (Idee 3)

1. HTML-Code: 

 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>

Code anzeigen

2. Andere Stildateien werden hier nicht zusammengefasst.

Das obige ist der detaillierte Inhalt vonAnalyse der Probleme, die bei der Übermittlung von Bildern in Formularformularen aufgetreten sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung von Beispielen für die Routing-Router-Klasse in Angular4Nächster Artikel：Detaillierte Erläuterung von Beispielen für die Routing-Router-Klasse in Angular4

In Verbindung stehende Artikel

Mehr sehen