input file 在開發中遇到的問題相似ajax form表單提交 input file中的文件

時間 2019-11-19

標籤 input file 開發遇到問題相似 ajax form 表單提交文件欄目 Ajax 简体版

原文原文鏈接

最近在作項目的過程當中遇到個問題，在這裏作個記錄防止往後忘記javascript

現今的主流瀏覽器因爲ajax提交form表單沒法把文件類型數據提交到後臺，供後臺處理，但是開發中因爲某些緣由又不得不用ajax提交文件，html

爲了解決這個問題我走了很多彎路：前端

一、用原生的 input file ，不支持ajax上傳文件，你確定會說能夠用 ajax form表單上傳了呀？不過我後面還要調用上傳成功後用js處理一些對話框，因此這種方法排除java

二、用了 uploadify 上傳插件，弄出來能上傳東西，結果不理想；由於不能判斷上傳的是哪一張圖片，需求得判斷每一張圖片，排除jquery

三、最後選擇了jquery.form.min.js 這個上傳插件，至於怎麼用網上有很多的教程了，我這裏就列出我遇到的一些問題吧，供往後再次遇到能快速使用（忘記了能夠快速找到）git

下面說說 jquery.form.min.js 插件它是一個優秀的Ajax表單插件，咱們能夠很是容易的使用它處理表單控件的值，清空和復位表單控件，附件上傳，以及完成Ajax表單提交。jquery.form.min.js 有兩個核心方法ajaxForm()和ajaxSubmit()，因爲我只用到了ajaxSubmit(),因此我只介紹下ajaxSubmit()的應用。github

利用ajaxSubmit()使得整個表單的ajax提交過程變得很是的簡單，因此我就說說我遇到的問題：web

N年前寫的文章了，今天回來登陸下，微刷粉平臺提供微博刷粉、微博加粉、微博評論、微博轉發，微信公衆號刷粉、微信公衆號加粉、微信公衆號刷閱讀評論，抖音刷粉刷贊，全民K歌，小紅書等業務，微刷粉是價格最低服務最好的一家粉絲服務平臺

就找 www.shualiang.top/nw 刷量ajax

我用 jquery.form.min.js 遇到的幾個問題：json

3.1 、單擊提交按鈕是，對話框自動關閉問題（用jquery.form.min.js中的方法實現）

3.2 、判斷input文件上傳類型問題（用input標籤的 onchange事件判斷）

3.3 、在IE 瀏覽器下 input file 清空問題（用js清空）

結合下面這些連接瞭解 jquery.form.min.js 的經常使用屬性

http://www.helloweba.com/view-blog-236.html

http://www.jb51.net/article/42271.htm

jquery.form.js 官網：http://malsup.com/jquery/form/

demo:view-source: http://malsup.com/jquery/form/progress.html

github ：https://github.com/malsup/form

下面貼出上面三個問題的前端代碼：

問題3.1的答案

 function showRequest(formData, jqForm, options) {//提交前完成，驗證input file 中的文件
       if(!true)
       { 
            alert("密碼不能爲空！")
            return false;//沒法經過驗證
       }
      else
       {
            return true;//這樣就經過驗證
        }

問題3.3的答案

html

<form id="index_form" name="index_form" role="form" method="post" class="form-horizontal" enctype="multipart/form-data">
      <table>
           <tr>  <td> 圖片一 : <input id="pic1" name="pic1" type="file" onchange="pic1()"/> </td>  </tr>
           <tr> <td>  圖片二 : <input id="pic2" name="pic2" onchange="pic2()" type="file" /> </td>   </tr>
           <tr> <td>  圖片三: <input id="pic3" name="pic3" onchange="pic3()" type="file" /></td>  </tr>                      
      </table> 
<input class="btn btn-primary" value="提交" type="submit" /> 
</form>

問題3.2答案 js 這裏只給出一個input file 驗證方法

  //校驗上傳文件是否爲圖片格式
    function pic1() {
        var strs = new Array(); //定義一數組
        var pic1= $("#pic1").val();
        strs = pic1.split('.');
        var suffix = strs [strs .length - 1];

        if (suffix != 'jpg' && suffix != 'gif' && suffix != 'jpeg' && suffix != 'png') {
            alert("你選擇的不是圖片,請選擇圖片！");
            var obj = document.getElementById('pic1');
            obj.outerHTML = obj.outerHTML; //這樣清空，在IE8下也能執行成功
             //obj.select(); document.selection.clear(); 好像這種方法也能夠清空 input file 的value值，不過我沒測試
        }
    }

$(function(){ 
    var options = {  
        url:' .. .. ,, ',
        beforeSubmit:  showRequest,  //提交前處理 
        success:       showResponse,  //處理完成 
        resetForm: true,  
        dataType:  'json'  
       };  
  
    $('#index_form').submit(function() { //注意這裏的index_form
     $(this).ajaxSubmit(options); 
     return false;//防止dialog 自動關閉

     });
 });

MVC中的action 獲取文件的方法

            HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
            if (files.Count<3)//這裏是爲了出現未知的錯誤，因此只有上傳了三張圖片才執行後面的代碼
            {
                gm.id = 1;
                gm.message = "圖片沒上傳成功！";
                return Json(gm);
            }

執行action方法成功後返回前端再次執行的js方法

function showResponse(responseText, statusText) {
         if (responseText.id == 3) {
              alert("上傳成功");          
              $("#My_Dialog").modal('show');//走這麼多彎路，爲的就是這裏，再次打開一個Dialog,因此沒選擇用form 的 action 上傳文件
            }
         else 
             {
              alert(responseText.message); 
              }

下面給出 ajaxSubmit() 提供豐富的選項設置，咱們根據使用的可能性大小進行列表，以供參考。

屬性	描述
url	Ajax請求將要提交到該url，默認是表單的action屬性值
type	指定提交表單數據的方法（method）：「GET」或「POST」。默認值：表單的method屬性值（若是沒有找到默認爲「GET」）。
dataType	指望返回的數據類型。null、「xml」、「script」或者「json」其中之一。dataType提供一種方法，它規定了怎樣處理服務器的響應。這個被直接地反映到jQuery.httpData方法中去。下面的值被支持： 'xml'：若是dataType == 'xml'，將把服務器響應做爲XML來對待。同時，若是「success」回調方法被指定，將傳回responseXML值。 'json'：若是dataType == 'json'，服務器響應將被求值，並傳遞到「success」回調方法，若是它被指定的話。。 'script'：若是dataType == 'script'，服務器響應將求值成純文本。。默認值：null（服務器返回responseText值）
target	指明頁面中由服務器響應進行更新的元素。元素的值可能被指定爲一個jQuery選擇器字符串，一個jQuery對象，或者一個DOM元素。默認值：null。
beforeSubmit	表單提交前被調用的回調函數。「beforeSubmit」回調函數做爲一個鉤子（hook），被提供來運行預提交邏輯或者校驗表單數據。若是「beforeSubmit」回調函數返回false，那麼表單將不被提交。「beforeSubmit」回調函數帶三個調用參數：數組形式的表單數據，jQuery表單對象，以及傳入ajaxForm/ajaxSubmit中的Options對象。默認值：null
success	表單成功提交後調用的回調函數。若是提供「success」回調函數，當從服務器返回響應後它被調用。而後由dataType選項值決定傳回responseText仍是responseXML的值。默認值：null
clearForm	表示若是表單提交成功是否清除表單數據。默認值：null
resetForm	表示若是表單提交成功是否進行重置。默認值: null

jquery.form插件還提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法。一般咱們可使用表單驗證插件和jquery.form插件一塊兒使用，效果更好。

下面給出一個 uploadify 插件示例（與jquery.form插件有所不一樣）代碼，供往後參考：

<div id="index_Dialog" class="modal hide fade" tabindex="-1" role="dialog"
    aria-labelledby="myCaseLableJH" aria-hidden="true"><form id="index_form" name="indexUploadJH_form" role="form" method="post" class="form-horizontal" enctype="multipart/form-data">
        <b>請上傳</b> <br />
          圖片上傳:<input id="uploadifyID" name="uploadifyID" type="file" multiple="multiple"/>
                 <div id="fileQueue" class="fileQueue">
    </form>
        <input class="btn btn-primary" value="提交" type="button" onclick="javascript:indexFunction();"/>               
</div>
<script type="text/javascript">


       //  認證必填框驗證
        function indexFunction() {
            if ($("#Pass").val() == "") {//密碼不能爲空
                $("Pass").siblings('.CasevalidText').text('密碼不能爲空').show();
                return;
            }
            var Count = $("#uploadifyID").data('uploadify').queueData.queueLength;//隊列中文件數
           
            if (lawyerCertificateJHCount <= 0) {
                alert("請上傳文件");
                return;
            }
            $('#uploadifyID').uploadify('upload', '*');
        }
  
    //清除而且關閉窗體
    function clearfromCasePassdata() {
       // $("#index_form :input").not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").remove("selected"); //核心
        $("#index_Dialog").modal('hide');
    }
    $(function () {
        //上傳文書附件管理
        loadFun();//初始化插件

    })
        //關閉上傳圖片窗體
        function ClosePDFsee() {
            $("#index_Dialog").modal('hide');
        }
        
               
function loadFun(){
            $('#uploadifyID').uploadify({
                'swf': '/Scripts/uploadify/uploadify.swf',  //FLash文件路徑
                'buttonText': '瀏  覽',
                'width': 40,                          // 按鈕的寬度
                'height': 15,                                //按鈕文本
                'uploader': '/Home/Action',        //處理文件上傳Action
                'queueID': 'fileQueue',           //隊列的ID
                'queueSizeLimit': 999,                          //隊列最多可上傳文件數量，默認爲999
                'auto': false,                                 //選擇文件後是否自動上傳，默認爲true
                'multi': false,                                 //是否爲多選，默認爲true
                'removeCompleted': true,                       //是否完成後移除序列，默認爲true
                'fileSizeLimit': '0MB',
                'fileTypeDesc': "Image Files",                 //Files 標識能夠上傳任意文件
                'fileTypeExts': '*.jpg;*.png;*.gif;*.jpeg;', //容許上傳的文件類型，限制彈出文件選擇框裏能選擇的文件
                'onQueueComplete': function (event, data) {                 //全部隊列完成 後事件
                     $('#uploadifyID').uploadify('cancel', '*');
                },
                'onUploadStart': function (file) {
                    $('#uploadifyID').uploadify("settings", 'formData', { 'Pass': $("#Pass").val(), Phone: $("#Phone").val(), no: $("#no").val(), name: $("#name").val(), fileIndex: file.index, filelength: $("#uploadifyID").data('uploadify').queueData.queueLength, intCount: file.index });
                },
                'onUploadError': function (event, queueId, fileObj, errorObj) {

                },
                'onUploadSuccess': function (file, data, respone) {
                    data = JSON.parse(data);
                    if (data.id == 2) {
                        $("#index_Dialog").modal('hide');
                        $('#IndexmediaForm').media({
                            width: 500, height: 600,
                            src: url
                        });
                        $("#newDialog").modal('show');
                    }
                    else {
                        alert("上傳失敗，" + data.message);
                    }
                }
            });

        }

下面對 uploadify 作個補充：

 //核心，在bootstrap中對form表單的清空
$("#id:input").not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").remove("selected"); 

//對 uploadify 中文件的清空
  $('#id').uploadify('cancel', '*');

轉載請註明出處http://www.cnblogs.com/izhiniao/p/4390168.html，謝謝！