用iframe实现灵活的上传文件

最新推荐文章于 2021-08-05 14:59:49 发布
最新推荐文章于 2021-08-05 14:59:49 发布
阅读量419 收藏
点赞数
文章标签： iframe javascript server exception function string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a3998888/article/details/5748634
版权

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        string strFileName;
        string strFileExtension;
        int intLastIndex;
        if (Request.Files.Count == 1)
        {
            try
            {
                strFileName = myFile.PostedFile.FileName;
                intLastIndex = strFileName.LastIndexOf("//");
                if (intLastIndex > 0)
                {
                    intLastIndex += 1;
                    strFileName = strFileName.Substring(intLastIndex, (strFileName.Length - intLastIndex));
                    strFileExtension = strFileName.Substring(strFileName.Length - 4, 4);
                    if (strFileExtension == ".txt")
                    {
                        myFile.PostedFile.SaveAs(Server.MapPath(".") + "//" + strFileName);
                        lblMsg.Text = strFileName + " Uploaded Sucessfully!";
                    }
                    else
                    {
                        lblMsg.Text = "Only Text File (.txt) can be uploaded.";
                    }
                }
                else
                {
                    lblMsg.Text = "Please Select a File!";
                }
            }
            catch (Exception exc)
            {
                lblMsg.Text = exc.Message;
            }
        }
    }
</script>

<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" οnclick="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();实际上调用了那个“上传”的按钮了，从而完成整个过程

 

a3998888
关注
Ajax基于iframe文件上传
飘痕
05-28 3582
关于Ajax的文件上传我在网上查找了一些方法，一种方法用的是使用javascript读取客户端的文件内容并将其封装在HTTP的协议中，然后再上传给服务器，但我认为这样的做法对于用户来说是不安全的。于是查了一些相关的书，幸运的在《Ajax完全手册》找到了一个基于HTML标签的文件上传方法，特此总结 希望能对阅读的你有帮助： 总体的思想是将上传后的信息在页面是的iframe标签内显示,即将f
通过隐藏iframe实现无刷新上传文件操作
11-25
本文将详细介绍如何使用隐藏的IFrame实现无刷新上传文件，以及涉及到的相关技术。 首先，我们需要创建一个HTML表单，其中包含一个用于选择文件的`<input type="file">`元素。这个表单的`target`属性设置为一个...
Ajax 无刷新上传图片
weixin_30667649的博客
09-04 71
如果用ajax直接传图片后台不好接受，所以最终还是要通过ajax来实现，原理很简单，触发form的submit()就可以了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <sc...
iframe上传文件html,用iFrame模拟Ajax上传文件
weixin_31597759的博客
06-09 179
前段时间在解决ajax上传文件时折腾了好一阵。直接用$.post上传文本信息肯定是没有问题的。但是$.post直接上传图片是不可行的。后来看到网上的一些解决方案，有现成的ajax上传文件的封装的方法也有利用flash的。flash确实是个好方法 但是不是每个人都会flash的而且下载下来现成的方法要做修改也不是件易事，且文件相对较大。最后只好模拟iframe来实现。发现相当的简单。html:附件:...
Iframe上传文件
weixin_30652897的博客
07-19 100
onload事件写在标签里面会报错 接受文件用for line in obj.chunks()　　f.write(line) import uuid　　nid=str(uuid.uuid4())　　生成随机字符串 转载于:https://www.cnblogs.com/jintian/p/11211909.html...
详解Ajax和form+iframe 实现文件上传的方法(两种方式)
10-22
在文件上传的场景中，Ajax可以实现异步上传文件，提供更好的用户体验。 在现代浏览器中，特别是HTML5的支持下，文件上传变得更加简单和强大。HTML5引入了`<input type="file">`的多文件选择功能，和`XMLHttpRequest...
form+iframe解决跨域上传文件的方法
09-01
为了解决这个问题，可以使用`form`配合`iframe`的技术来实现跨域文件上传。这种方法主要利用了`form`表单提交时可以指定目标`target`属性，而`iframe`可以加载其他域的内容而不违反同源策略。 1. **`form`标签与`...
用iframe实现不刷新整个页面上传图片的实例
09-01
这种利用`iframe`实现无刷新上传图片的方法具有一定的灵活性，可以满足不使用Flash或其他第三方插件的需求。如果需要更复杂的功能，比如进度条显示，可以在Servlet端输出进度信息，然后通过JavaScript在客户端更新...
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
09-03
本文将详细介绍基于iframe、FormData以及FileReader的三种无刷新上传文件的方法。 1. **基于iframe的文件上传** iframe常用于解决表单提交导致的页面刷新问题。当表单的`target`属性设置为一个iframe的ID时，表单...
ajax(iframe)无刷新提交表单、上传文件
10-28
要通过ajax保存表单，一切都OK，测试也通过，却发现文件没有上传成功！然后就有了用 ajax是否可以上传文件的疑问。
iframefileupload
09-12
iframefileupload.js全部通过原生JS实现，同时脱离jquery和ajax，用最少的代码库依赖实现页面无刷新上传文件的同时也可以向后端传递json数据等。
iframe 文件上传
十年之约
03-19 497
文件上传实现方式主要有：
Iframe文件上传
weixin_30587025的博客
07-19 308
要在form标签加enctype="multipart/form-data" Iframe标签不显示 不是每个浏览器都兼容FormData 转载于:https://www.cnblogs.com/jintian/p/11211858.html
iframe文件上传
DaiDai的博客
05-25 990
使用iframe进行文件上传文件上传有两种方式，第一个就是使用formdata的方式进行上传，第二种方式就是本文所讲的iframe的方式 1. 使用表单以及input框 <form id="upload_form_file_open_bank" enctype="multipart/form-data" target="message_unit" action="/files/
java iframe文件上传_Java文件上传
weixin_39786706的博客
02-16 281
最近项目需要使用 Angular，对于初学 Angular 的我只能硬着头皮上了，项目中有一个需求是文件上传，磕磕绊绊之下也实现了，将实现过程中学习到的一些知识记录下来以备将来查阅。与表单数据编码相关的知识通常，我们使用 HTML 的标签来为用户输入创建一个表单，使用作为文件上传的控件。要将表单的数据发送给后台，不仅要通过指定的属性method来确定发送数据的 HTTP 方法而且需...
文件上传，iframe跨域数据提交
nbin2008的博客
04-19 1487
1、文件上传，图片上传，第三方uploadify插件，http://www.uploadify.com/about/ 2、用iframe上传文件，提交表单，主要思路就是：  a、js创建form表单，iframe，添加到body里，form的target要和iframe的name一致。  b、form表单里更新数据，submit提交  c、如果上传文件，图片，form里面添加
ajax 文件上传 iframe,上传文件的三种方式xhr,ajax和iframe及上传预览
weixin_39768917的博客
08-05 296
Title.upload {display: inline-block;background-color: #ef4300;cursor: pointer;width: 100px;height: 35px;text-align: center;position: absolute;line-height: 35px;top: 0;bottom: 0;right: 0;left: 0;z-inde...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值