<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>File Upload</title>

</head>

<body>

    <!--

        大家注意到这个form的target的了么？这个target属性的值frameFile,是form之后的iframe的name值,

        这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理，

        并且不会产生当前页面跳转!

     -->

    <form id='formFile' name='formFile' method="post" action='/uploads.aspx' target='frameFile' enctype="multipart/form-data">

        <input type='file' id='fileUp' name='fileUp' />

        <div id='uploadLog'></div>

        <br />

        <img width='200' src='' height='200' id='imgShow' alt='缩略图' />

    </form>

    <!--

        这个iframe拿到post过来的表单数据后会开始在自身内部访问post过来的页面地址,在内部中它会刷新页面，

        但是这已不重要了，因为当前的iframe已经被我display:none隐藏了！所以这样给用户看起来像是无刷新的

        页面文件上传，其实只是做一个一个小小的技巧！

    -->

    <iframe id='frameFile' name='frameFile' style=' display:none;'></iframe>

</body>

</html>
<script type="text/javascript" language="javascript">

        $(function () {

            $('#fileUp').change(function () {

                $('#uploadLog').html('开始上传中....');

                $('#formFile').submit();

            });

        })

        function uploadSuccess(msg) {

            if (msg.split('|').length > 1) {

                $('#imgShow').attr('src', msg.split('|')[1]);

                $('#uploadLog').html(msg.split('|')[0]);

            } else {

                $('#uploadLog').html(msg);

            }

        }

</script>

文件上传 - iframe上传的更多相关文章

  1. 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

  2. 那些年，我们在Django web开发中踩过的坑（一）——神奇的‘/’与ajax+iframe上传

    一.上传图片并在前端展示 为了避免前端整体刷新,我们采用ajax+iframe(兼容所有浏览器)上传,这样用户上传之后就可以立即看到图片: 上传前: 上传后: 前端部分html: <form s ...

  3. Jquery ajaxfileupload.js结合.ashx文件实现无刷新上传

    先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  4. js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  5. asp.net 怎么上传文件夹啊，不传压缩包

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  6. ASP.NET WebAPi（selfhost）之文件同步或异步上传

    前言 前面我们讲过利用AngularJs上传到WebAPi中进行处理,同时我们在MVC系列中讲过文件上传,本文结合MVC+WebAPi来进行文件的同步或者异步上传,顺便回顾下css和js,MVC作为客 ...

  7. .net 实现上传文件分割，断点续传上传文件

    一 介绍 断点续传搜索大部分都是下载的断点续传,涉及到HTTP协议1.1的Range和Content-Range头. 来个简单的介绍 所谓断点续传,也就是要从文件已经下载的地方开始继续下载.在以前版本 ...

  8. JS代码实用代码实例（输入框监听，点击显示点击其他地方消失,文件本地预览上传)

    前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...

  9. [html5+java]文件异步读取及上传核心代码

    html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...

随机推荐

  1. Java类文件结构

    一.概述 实现语言无关性的基础是虚拟机和字节码存储格式.Java虚拟机不和包括Java在内的任何语言绑定,只与"Class文件"这种特定的二进制文件所关联,Class文件中包含了J ...

  2. c++学习笔记——个单词转换的map程序详解

    实现功能:给定一个string,将它转换为另一个string.程序输入是两个文件,第一个文件保存转换规则,第二个文件为将要进行转换的文本. IDE:Windows7+VS2013 #include & ...

  3. 【docker】 centos7 安装docker

    1.Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker 通过 uname -r 命令查看你当前的内核版本 unam ...

  4. 【大数据系列】hive安装及启动

    一.安装好jdk和hadoop 二.下载apache-hive https://mirrors.tuna.tsinghua.edu.cn/apache/hive/hive-2.3.0/ 三.解压到安装 ...

  5. MFC控件CTabCtrl关联变量

    1.先建立一个对话框MFC应用程序,然后在工具箱里面把Tab Control控件放到对话框中的合适位置上. 再在对话框类中,将该控件绑定一个变量 用两种方法: 1 ) 自己定义成员变量 CTabCtr ...

  6. Javascript 细节优化技巧（转）

    break 语句和 continue 语句 break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行. break语句用于跳出代码块或循环. var i = 0; while( ...

  7. 原生js--鼠标事件

    鼠标事件对象几个重要的属性: clientX 窗口坐标,加上垂直滚动可以得到文档纵坐标 clientY 窗口坐标,加上水平滚动可以得到文档横坐标 altKey boolean值,点击时是否按下了alt ...

  8. linux下抓包学习--tcpdump的使用

    一.为什么需要学这个 很多时候,开发环境上不会出现问题.但在测试或者现场时,总是会有很多莫名其妙的问题. 这时候,能在出问题的环境上,开启抓包,然后再去重现问题的话,这时候,就可以拿到第一手的资料了. ...

  9. mysqlslap 压测工具使用说明

    PS:今天一同事问我有木有比较靠谱的mysql压力测试工具可用.其实mysql自带就有一个叫mysqlslap的压力测试工具,还是模拟的不错的.下面举例说说.mysqlslap是从5.1.4版开始的一 ...

  10. ftp主动与被动模式详解

    FTP是仅基于TCP的服务,不支持UDP.与众不同的是FTP使用2个端口,一个数据端口和一个命令端口(也可叫做控制端口).通常来说这两个端口是21(命令端口)和20(数据端口).但FTP工作方式的不同 ...