blocks|key|307624|text|我会回答我的问题，我想我找到了解决方案。以下是我为实现目标而遵循的步骤：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|307625|307626|使表单的属性“+target+”指向“+iframe+”。使用普通的请求(非异步/Ajax请求)提交iframe。目标框架是iframe，整个页面不会刷新，只刷新iframe。一旦发生iframe+E114onload事件(使用Javascript捕获该事件)，则可以执行所需的操作，例如，您可以发回一个请求，以列出最近上载的文件信息。H216<代码>G217>|ordered-list-item|offset|length|style|BOLD|307627|307628|最终的代码如下所示：|307629|++++

++++<iframe+id="uploadTrg"+name="uploadTrg"+height="0"+width="0"+frameborder="0"+scrolling="yes"></iframe>

++++<form+id="myForm"+action="http://example.com/file-upload-service"+method="post"+enctype="multipart/form-data"++target="uploadTrg">

++++++++File:+<input+type="file"+name="file">
++++++++<input+type="submit"+value="Submit"+id="submitBtn"/>

++++</form>

++++<div+id="ajaxResultTest"></div>|code-block|syntax|javascript|307630|javascript：|307631|$("iframe").load(function(){
++++//+ok+,+now+you+know+that+the+file+is+uploaded+,+you+can+do+what+you+want+,+for+example+tell+the+user+that+the+file+is+uploaded+
++++alert("The+file+is+uploaded");

++++//+or+you+can+has+your+own+technique+to+display+the+uploaded+file+name+%2B+id+?+
++++$.post('http://example.com/file-upload-service?do=getLastFile',null,function(attachment){

+++++++//+add+the+last+uploaded+file+,+so+the+user+can+see+the+uploaded+files
+++++++$("#ajaxResultTest").append("<h4>"+%2B+attachment.name+%2B+":"+%2B+attachment.id+"</h4>");

++++},'json');
});|307632|entityMap^0|0|0|1|2|7|8|J|8|Y|43|0|0|0|A|0|0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|Z|8|@$F|10|G|11|H|I]|$F|12|G|13|H|I]|$F|14|G|15|H|I]|$F|16|G|17|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|19|8|@$F|1A|G|1B|H|I]]|9|@]|A|$]]|$1|M|3|N|5|O|7|1C|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1D|8|@$F|1E|G|1F|H|I]]|9|@]|A|$]]|$1|T|3|U|5|O|7|1G|8|@]|9|@]|A|$P|Q]]|$1|V|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|W|$]]

<p>I will answer my question , I think I found the solution. These are the steps that I followed to achieve the goal :</p>

<ol>
<li>Make the attribute "<strong>target</strong>" of the <strong>form</strong> point to " <strong>iframe</strong> " .</li>
<li>Use a normal HTML request ( not Asynchronous/Ajax request ) to submit the form.</li>
<li>Because the target frame is iframe , the whole page will not be refreshed - just the iframe.</li>
<li>Once iframe <strong>onload</strong> event happens (capture that event using Javascript) then do what you want, e.g. You can send back a request to list recent uploaded file info.</li>
</ol>

<p>The final code looks like this:</p>

<pre><code>    &lt;!-- Attach a file --&gt;

    &lt;iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"&gt;&lt;/iframe&gt;

    &lt;form id="myForm" action="http://example.com/file-upload-service" method="post" enctype="multipart/form-data"  target="uploadTrg"&gt;

        File: &lt;input type="file" name="file"&gt;
        &lt;input type="submit" value="Submit" id="submitBtn"/&gt;

    &lt;/form&gt;

    &lt;div id="ajaxResultTest"&gt;&lt;/div&gt;
</code></pre>

<p>javascript :</p>

<pre><code>$("iframe").load(function(){
    // ok , now you know that the file is uploaded , you can do what you want , for example tell the user that the file is uploaded 
    alert("The file is uploaded");

    // or you can has your own technique to display the uploaded file name + id ? 
    $.post('http://example.com/file-upload-service?do=getLastFile',null,function(attachment){

       // add the last uploaded file , so the user can see the uploaded files
       $("#ajaxResultTest").append("&lt;h4&gt;" + attachment.name + ":" + attachment.id "&lt;/h4&gt;");

    },'json');
});
</code></pre>


blocks|key|3256358|text|这个例子取自BugKiller。完整的工作示例，允许您上传徽标并立即在html页面中看到它，随后上传值将被清除：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3256359|html：|3256360|<form+id="uploadForm"+method="post"+enctype="multipart/form-data"++target="uploadTrg">
++<div+id="fileUploadWrapper"><input+type="file"+name="file"+id="fileUpload"></div>
++<input+type="submit"+value="Upload"+id="submitBtn"/>
</form>
<iframe+id="uploadTrg"+name="uploadTrg"+height="0"+width="0"+frameborder="0"+scrolling="no"+style="display:none"></iframe>
<img+id="imgLogo"+style="border-width:0px;"+/>|code-block|syntax|javascript|3256361|javascript：|3256362|$(document).ready(function+()+{
++var+companynumber+=+'12345';+//get+this+from+the+database
++var+logoUploadUrl+=+'UploadHandler.aspx?logoupload=true&companynumber='+%2B+companynumber+;
++$("#uploadForm").attr("action",+logoUploadUrl);

++$("#uploadTrg").load(function+()+{
++++//upload+complete

++++//only+way+to+reset+contents+of+file+upload+control+is+to+recreate+it
++++$("#fileUploadWrapper").html('<input+type="file"+name="file"+id="fileUpload">');

++++//reload+the+logo+url,+add+ticks+on+the+end+so+browser+reloads+it
++++var+ticks+=+((new+Date().getTime()+*+10000)+%2B+621355968000000000);
++++var+logoUrl+=+'images/clients/'+%2B+companynumber+%2B+'/client.gif?'+%2B+ticks;
++++$("#imgLogo").attr('src',+logoUrl);
++});
});|3256363|上传处理程序代码(C#)：|3256364|namespace+MyWebApp+{
++++public+partial+class+UploadHandler+:+System.Web.UI.Page+{

++++++++protected+void+Page_Load(object+sender,+EventArgs+e)+{
++++++++++if+(Request.Params["logoupload"]+!=+null)+{
++++++++++++string+companynumber+=+Request.Params["companynumber"];
++++++++++++string+savePath+=+Server.MapPath("\\images")+%2B+"\\clients\\"+%2B+companynumber+%2B+"\\client.gif";
++++++++++++if+(File.Exists(savePath))
++++++++++++++++File.Delete(savePath);
++++++++++++//save+the+file+to+the+server+
++++++++++++Request.Files[0].SaveAs(savePath);

++++++++++++Response.Write("OK");
++++++++++++Response.Flush();
++++++++++++Response.End();
++++++++++}
+++++++}
}|3256365|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>This example taken from BugKiller. complete working example which allows you to upload a logo and see it immediately in the html page, following which the upload value gets cleared:</p>

<p>html:</p>

<pre><code>&lt;form id="uploadForm" method="post" enctype="multipart/form-data"  target="uploadTrg"&gt;
  &lt;div id="fileUploadWrapper"&gt;&lt;input type="file" name="file" id="fileUpload"&gt;&lt;/div&gt;
  &lt;input type="submit" value="Upload" id="submitBtn"/&gt;
&lt;/form&gt;
&lt;iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="no" style="display:none"&gt;&lt;/iframe&gt;
&lt;img id="imgLogo" style="border-width:0px;" /&gt;
</code></pre>

<p>javascript:</p>

<pre><code>$(document).ready(function () {
  var companynumber = '12345'; //get this from the database
  var logoUploadUrl = 'UploadHandler.aspx?logoupload=true&amp;companynumber=' + companynumber ;
  $("#uploadForm").attr("action", logoUploadUrl);

  $("#uploadTrg").load(function () {
    //upload complete

    //only way to reset contents of file upload control is to recreate it
    $("#fileUploadWrapper").html('&lt;input type="file" name="file" id="fileUpload"&gt;');

    //reload the logo url, add ticks on the end so browser reloads it
    var ticks = ((new Date().getTime() * 10000) + 621355968000000000);
    var logoUrl = 'images/clients/' + companynumber + '/client.gif?' + ticks;
    $("#imgLogo").attr('src', logoUrl);
  });
});
</code></pre>

<p>upload handler code behind (C#):</p>

<pre><code>namespace MyWebApp {
    public partial class UploadHandler : System.Web.UI.Page {

        protected void Page_Load(object sender, EventArgs e) {
          if (Request.Params["logoupload"] != null) {
            string companynumber = Request.Params["companynumber"];
            string savePath = Server.MapPath("\\images") + "\\clients\\" + companynumber + "\\client.gif";
            if (File.Exists(savePath))
                File.Delete(savePath);
            //save the file to the server 
            Request.Files[0].SaveAs(savePath);

            Response.Write("OK");
            Response.Flush();
            Response.End();
          }
       }
}
</code></pre>


<p>I'm trying to make ajax file upload . I read that it is not possible to do that without using <code>iframe</code> .<br />
I wrote :</p>
<pre><code>&lt;iframe id=&quot;uploadTrg&quot; name=&quot;uploadTrg&quot; height=&quot;0&quot; width=&quot;0&quot; frameborder=&quot;0&quot; scrolling=&quot;yes&quot;&gt;&lt;/iframe&gt;
&lt;form id=&quot;myForm&quot; action=&quot;file-component&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;  target=&quot;uploadTrg&quot;&gt;
File: &lt;input type=&quot;file&quot; name=&quot;file&quot;&gt;
&lt;input type=&quot;submit&quot; value=&quot;Submit&quot; id=&quot;submitBtn&quot;/&gt;
&lt;/form&gt;
</code></pre>
<p>and using jquery form plugin :</p>
<pre><code>$('#myForm').ajaxForm({
    dataType:  'json',
    success:   function(data){
        alert(data.toSource());
    }
});
</code></pre>
<p><strong>The Result :</strong></p>
<p>the file is uploaded successfully and I can see the uploaded file , but a dialog box appears :</p>
<p><img src="https://farm5.static.flickr.com/4065/4640629084_0842838e5f_o.png" alt="alt text" /></p>
<p>since I send back a json result to display the file name + size etc ..</p>
<p><strong>My Question :</strong>
How can I use the iFrame to be able to make &quot; ajax file upload&quot;.</p>
<p>Note:</p>
<ol>
<li>I don't prefer to use special plugin to upload file , if there is more appropriate/easier  solutions.</li>
<li>I use jsp/servlets as a server-side language .. but I think it does not make sense which language I use .</li>
</ol>
<p>Thanks</p>


How to make Asynchronous(AJAX) File Upload using iframe?

服务器

我正在尝试让ajax文件上传。我读到不使用iframe是不可能做到这一点的。我写道：<iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"></iframe><form id="myForm...

问如何使用iframe实现异步(AJAX)文件上传？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用iframe实现异步(AJAX)文件上传？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用iframe实现异步(AJAX)文件上传？
EN