jQueryのiframeのファイルアップロード

Question

ImはjQueryを使って、ファイルのアップロードを構築するが、Imは、フォームの属性を設定しようとしているjQueryのエラーを取得：

$(document).ready(function() { 
    $("#formsubmit").click(function() { 

     var iframe = $('<iframe name="postframe" id="postframe" class="hidden" src="about:none" />'); 

     $('div#iframe').append(iframe); 

     $('#theuploadform').attr("action", "/ajax/user.asmx/Upload") 
     $('#theuploadform').attr("method", "post") 
     $('#theuploadform').attr("userfile", $('#userfile').val()) 
     $('#theuploadform').attr("enctype", "multipart/form-data") 
     $('#theuploadform').attr("encoding", "multipart/form-data") 
     $('#theuploadform').attr("target", "postframe") 
     $('#theuploadform').submit(); 
     //need to get contents of the iframe 

     $("#postframe").load(
      function() { 
       iframeContents = $("iframe")[0].contentDocument.body.innerHTML; 
       $("div#textarea").html(iframeContents); 
      } 
     ); 
    } 
); 


<div id="uploadform"> 
    <form id="theuploadform" action=""> 
     <input id="userfile" name="userfile" size="50" type="file" /> 
     <input id="formsubmit" type="submit" value="Send File" /> 
    </form> 
</div> 

<div id="iframe" style="width: 0px; height: 0px; display: none;"> 
</div> 

<div id="textarea"> 
</div> 

Answer 1

解決策が見つかりました。このコードは動作します：

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#formsubmit").click(function() { 

      var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none"></iframe>'); 

      $("body").append(iframe); 

      var form = $('#theuploadform'); 
      form.attr("action", "/upload.aspx"); 
      form.attr("method", "post"); 

      form.attr("encoding", "multipart/form-data"); 
      form.attr("enctype", "multipart/form-data"); 

      form.attr("target", "postiframe"); 
      form.attr("file", $('#userfile').val()); 
      form.submit(); 

      $("#postiframe").load(function() { 
       iframeContents = this.contentWindow.document.body.innerHTML; 
       $("#textarea").html(iframeContents); 
      }); 

      return false; 

     }); 

    }); 

</script> 


<form id="theuploadform"> 
    <input id="userfile" name="userfile" size="50" type="file" /> 
    <input id="formsubmit" type="submit" value="Send File" /> 
</form> 

<div id="textarea"> 
</div> 

Answer 2

あなたが代わりに同じ項目を複数回フェッチを知って、なぜただ再利用してください：

var form = $('#theuploadform'); 
form.attr("action", "/ajax/user.asmx/Upload"); 
form.attr("method", "post"); 
// and so on 

どのようなエラーがありますか？あなたはそれを投稿できますか？あなたがここに属性を自分で設定することはできませんので

UPDATE

は周りの仕事です：

iframe内にフォームを入れ、入力ボタンにのonchangeイベントを添付してください。 ユーザーがファイルを選択すると、ファイルをアップロードするために必要なコードがトリガーされ（送信）、親ウィンドウがiframeを閉じることができます。

Answer 3

フォームのターゲットは、例えば、IFRAMEの名前と同じでなければなりません：

<form target="frame" 
     action="http://posttestserver.com/post.php?dir=example" 
     method="post" 
     enctype="multipart/form-data"> 
    <input name="file" type="file"/> 
</form> 

<iframe name="frame"></iframe> 

そして、この後、あなたは「変更」をリッスンする入力ボタンにイベントを添付することができます。 さらに、jsonpを使用してサーバーから進捗状況を得ることができ、これはすべてのブラウザーイベントIE3 +で機能します。このような何か：それは公式のプラグインではありません

$('input').change(function() { 
    $('form').submit(); 
}); 

$.getJSON('/echo/jsonp/?callback=?', function(e, progress) { 
    console.log(progress); 
}); 

Answer 4

は、しかし、ここであなたは、プラグインの中に、フォームの提出ロジックをラップ可能性がどのように例を示します。

例：

<form method="post" enctype="multipart/form-data"> 
    <input name="file" type="file" /> 

    <input type="text" name="test" /> 

    <button type="submit">Submit</button> 
</form> 

<script> 
    $('form').submit(function (e) { 

     //prevent default submit 
     e.preventDefault(); 

     //submit through frame 
     $(this).frameSubmit({ 
      done: function (form, frame, options) { 
       console.log('done!'); 
      }, 
      fail: function (form, frame, options) { 
       console.log('fail!'); 
      }, 
      always: function (form, frame, options) { 
       console.log('always!'); 
      } 

      //custom hasError implementation if needed 
      //by default if the frame's body HTML contains the text "unexpected error" or "server error" 
      //it is treated as an error 
      /*,hasError: function (frame) { 
       return false; 
      }*/ 
     }); 
    }); 

</script> 

PLUGIN

!function ($, doc) { 
    var _frameCount = 0, 
     _callbackOptions = ['done', 'fail', 'always'], 
     _hasFailed = function (frame) { 
      var frameHtml = $(frame).contents().find('body').html(); 

      return /(server|unexpected)\s+error/i.test(frameHtml); 
     }, 
     _createFrame = function() { 
      return $('<iframe>').prop('name', 'jq-frame-submit-' + _frameCount++).hide().appendTo(doc.body); 
     }; 

    $.fn.extend({ 
     frameSubmit: function (options) { 

      return this.each(function() { 
       var deferred = $.Deferred(), 
        form = this, 
        initialTarget = form.target, 
        hasTarget = form.hasAttribute('target'), 
        hasFailed = options.hasFailed || _hasFailed, 

        //The initial frame load will fire a load event so we need to 
        //wait until it fires and then submit the form in order to monitor 
        //the form's submission state. 
        $frame = _createFrame().one('load', function() { 
         $frame.one('load', function() { 
          deferred[hasFailed(this) ? 'reject' : 'resolve'](form, this, options); 
          $frame.remove(); 
         }); 

         form.submit(); 

         //restore initial target attribute's value 
         if (hasTarget) form.target = initialTarget; 
         else form.removeAttribute('target'); 
        }); 

       //attach handlers to the deferred 
       $.each(_callbackOptions, function (i, optName) { 
        options[optName] && deferred[optName](options[optName]); 
       }); 

       //make sure the form gets posted the to iframe 
       form.target = $frame.prop('name'); 
      }); 
     } 
    }); 
}(jQuery, document); 

Answer 5

これは、この行の目的は何アヤックス

http://jquery.malsup.com/form/#file-upload