1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>File Upload</title>
  5. </head>
  6. <body>
  7.     <!--
  8.         大家注意到这个form的target的了么？这个target属性的值frameFile,是form之后的iframe的name值,
  9.         这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理，
  10.         并且不会产生当前页面跳转!
  11.      -->
  12.     <form id='formFile' name='formFile' method="post" action='/uploads.aspx' target='frameFile' enctype="multipart/form-data">
  13.         <input type='file' id='fileUp' name='fileUp' />
  14.         <div id='uploadLog'></div>
  15.         <br />
  16.         <img width='200' src='' height='200' id='imgShow' alt='缩略图' />
  17.     </form>
  18.  
  19.     <!--
  20.         这个iframe拿到post过来的表单数据后会开始在自身内部访问post过来的页面地址,在内部中它会刷新页面，
  21.         但是这已不重要了，因为当前的iframe已经被我display:none隐藏了！所以这样给用户看起来像是无刷新的
  22.         页面文件上传，其实只是做一个一个小小的技巧！
  23.     -->
  24.     <iframe id='frameFile' name='frameFile' style=' display:none;'></iframe>
  25. </body>
  26. </html>
  1. <script type="text/javascript" language="javascript">
  2.         $(function () {
  3.             $('#fileUp').change(function () {
  4.                 $('#uploadLog').html('开始上传中....');
  5.                 $('#formFile').submit();
  6.             });
  7.         })
  8.         function uploadSuccess(msg) {
  9.             if (msg.split('|').length > 1) {
  10.                 $('#imgShow').attr('src', msg.split('|')[1]);
  11.                 $('#uploadLog').html(msg.split('|')[0]);
  12.             } else {
  13.                 $('#uploadLog').html(msg);
  14.             }
  15.         }
  16. </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. iOS - Share Extension

    1. 学 Share Extension 之前 先了解一下iOS的App Extension 2.1 创建Share Extension扩展Target ** 注:扩展不能单独创建,必须依赖于应用工程 ...

  2. cygwin设置NDK环境变量ANDROID_NDK_ROOT

    cygwin安装目录下的“home/当前用户名”的.bash_profile下以UltraEdit(Unix方式)或者eclipse打开,最后添加一句: ANDROID_NDK_ROOT=/cygdr ...

  3. php计算两个日期时间差（返回年、月、日）

    在PHP程序中,很多时候都会遇到处理时间的问题,比如:判断用户在线了多长时间,共登录了多少天,两个帖子发布的时间差或者是不同操作之间的日志记录等等.在文章中,简单地举例介绍了PHP中如何计算两个日期相 ...

  4. 10分钟10行代码开发APP(delphi 应用案例)

    总结一下用到的知识(开发环境安装配置不计算在内): 第六章  使用不同风格的按钮: 第十七章  让布局适应不同大小与方向的窗体: 第二十五章 使用 dbExpress访问 InterBase ToGo ...

  5. Elasticsearch学习之ElasticSearch 5.0.0 安装部署常见错误或问题

    ElasticSearch 5.0.0 安装部署常见错误或问题 问题一: [--06T16::,][WARN ][o.e.b.JNANatives ] unable to install syscal ...

  6. sencha touch JsonP 自动提示消息 masked

    //公用类 Ext.define('app.util', { alternateClassName: 'util', statics: { /*为Ext.Viewport添加一个消息提示组件(需要初始 ...

  7. mysql优化之伪哈希索引

    想法非常简单,在标准的B-Tree索引上创建一个伪哈希索引.它和真正的哈希索引不是一回事,因为它还是使用B-Tree索引进行查找.然而,它将会使用键的哈希值进行查找,而不是键自身.你所要做的事情就是在 ...

  8. Sphinx以及coreseek的安装及使用

    检索结构 php -> sphinx -> mysql 非结构化数据又叫全文数据,非固定长度字段例如文章标题搜索这类适用sphinx 全文数据搜索: 1 顺序扫描 : 如like查找 2 ...

  9. 内网渗透中的NTLM-Hash Relay

    基础知识 NTLN和Net-NTLM 1.NTLM(V1/V2)的hash是存放在安全账户管理(SAM)数据库以及域控的NTDS.dit数据库中,获取该Hash值可以直接进行PtH攻击,我博客中前文也 ...

  10. SQLite 3的中文读写

    调用sqlite3_open函数默认创建的数据库encoding=UTF-8,执行sqlite3_exec时需要将对应的字符串转换为UTF-8格式多字节字符串.比如: sqlite3* db; aut ...