jQuery的iframefile upload

即时通讯使用jQuerybuild立一个file upload，但我得到一个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

我find了解决scheme。 此代码工作：

 <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

这不是一个正式的插件，但是这里是一个例子，你如何可以将表单的提交逻辑封装到一个插件。

例：

 <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> 

插入

 !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 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> 

在此之后，您可以将事件添加到inputbutton以侦听“更改”。 此外，你可以从服务器使用jsonp获得进展，并且所有这些都可以在任何浏览器事件IE3 +中工作。 像这样的东西：

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

Answer 4

这是使用ajax上传文件的好插件

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

Answer 5

你知道，而不是多次获取相同的项目，为什么不重复使用它：

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

你有什么样的错误？ 你可以发布吗？

UPDATE

既然你不能自己设置属性，这是一个解决方法：

把表单放入一个iframe中，并将一个onchange事件附加到inputbutton。 当用户select一个文件，你触发必要的代码上传文件（提交），然后父窗口可以closuresiframe。