用iframe实现灵活的上传文件

最新推荐文章于 2021-08-05 14:59:49 发布

a3998888

最新推荐文章于 2021-08-05 14:59:49 发布

阅读量455

点赞数

CC 4.0 BY-SA版权

文章标签： iframe javascript server exception function string

本文链接：https://blog.youkuaiyun.com/a3998888/article/details/5748634

本文介绍了一种利用iframe简化文件上传操作的方法。通过点击链接触发文件选择对话框，并自动提交所选文件进行上传，无需额外点击上传按钮。具体实现了在用户选择文件后立即上传的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用iframe其实还是可以做不少效果的，比如想做这样一饿效果：用户点某个连接，然后弹出文件上传框，之后点选了文件后，可以马上上传文件，而不象平时那样，选好文件好，还要按“上传”。是这样实现的，用IFRAME，

首先在index.aspx中这样写
<script type="text/javascript" language="javascript">
    function Browse()
    {
        var ifUpload;
        var confirmUpload;
        ifUpload = ifu.document.form1;
        ifUpload.myFile.click();
    }
</script>
    <title>File Upload</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblStart" runat="server"></asp:Label>
        <a href="#" OnClick="javascript:Browse();">增加文件</a>
        <iframe src="Upload.aspx" frameborder="0" id="ifu" name="ifu"></iframe>
    </div>
    </form>
这里，有一个iframe,指向upload.aspx，当用户点“增加文件”时，首先是调用javascript的browse()了。在这里，先看下upload.aspx先

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript">
    function SubmitForm()
    {

        document.form1.submit ();
    }
</script>
    <title>Upload</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="file" runat="server" id="myFile" name="myFile" style="visibility:hidden;" />
        <input type="button" runat="server" id="btnSubmit" name="btnSubmit" onclick="javascript:SubmitForm();" style="visibility:hidden;" />
        <br /><asp:Label ID="lblMsg" runat="server" ForeColor="red" Font-Size="Medium" Font-Bold="true"></asp:Label>
    </div>
    </form>
</body>

这里，同样也有一个文本上传框，但style是hidden,名称是myFile,而那个传统的上传按钮，这里叫btnSUbmit,而其onclick事件
submitform里，则提交了表单，同时load()里则是实际的上传代码。
同样，在main.aspx中，ifUpload.myFile.click();其实是调用了upload.aspx中的那个上传文件框，首先打开了这个文件框，然后当选定文件后，则通过
ifUpload.btnSubmit.click();实际上调用了那个“上传”的按钮了，从而完成整个过程