文件上传 - iframe上传
<!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上传的更多相关文章
- 打造 html5 文件上传组件,实现进度显示及拖拽上传,支持秒传+分片上传+断点续传,兼容IE6+及其它标准浏览器
老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...
- 那些年,我们在Django web开发中踩过的坑(一)——神奇的‘/’与ajax+iframe上传
一.上传图片并在前端展示 为了避免前端整体刷新,我们采用ajax+iframe(兼容所有浏览器)上传,这样用户上传之后就可以立即看到图片: 上传前: 上传后: 前端部分html: <form s ...
- Jquery ajaxfileupload.js结合.ashx文件实现无刷新上传
先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
- js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中
ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...
- asp.net 怎么上传文件夹啊,不传压缩包
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
- ASP.NET WebAPi(selfhost)之文件同步或异步上传
前言 前面我们讲过利用AngularJs上传到WebAPi中进行处理,同时我们在MVC系列中讲过文件上传,本文结合MVC+WebAPi来进行文件的同步或者异步上传,顺便回顾下css和js,MVC作为客 ...
- .net 实现上传文件分割,断点续传上传文件
一 介绍 断点续传搜索大部分都是下载的断点续传,涉及到HTTP协议1.1的Range和Content-Range头. 来个简单的介绍 所谓断点续传,也就是要从文件已经下载的地方开始继续下载.在以前版本 ...
- JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)
前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...
- [html5+java]文件异步读取及上传核心代码
html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...
随机推荐
- VMware 14 的永久许可密钥
VMware workstation 14永久激活密钥分享: CG54H-D8D0H-H8DHY-C6X7X-N2KG6 ZC3WK-AFXEK-488JP-A7MQX-XL8YF AC5XK-0ZD ...
- JS 实现拖动效果
<html> <body style="margin:0px;"> <script src="http://ajax.googleapis. ...
- 美秒快报 移动端API接口后台制作总结
1.创建方法时,不要用index这类的不易显示该方法功能的单词,尽量使用功能的缩写 例如: public function xssc(){} 2.尽量少用Request方法,多用input助手方法获取 ...
- c++ 类内static成员初始化
类内部的static成员,除了为const static 且为整数类型(int char bool)可在类内部初始化. 其他的都建议在对应的cpp文件中进行初始化. test.h #ifndef TE ...
- 电子邮件 -- 图解TCP_IP_第5版
图解TCP_IP_第5版 作者: [日]竹下隆史 / [日]村山公保 / [日]荒井透 / [日]苅田幸雄 出版社: 人民邮电出版社原作名: マスタリングTCP/IP 入門編 第5版译者: 乌尼日其其 ...
- [转]F5负载均衡名词LTM和GTM
LTM就是本地流量管理,也就是通常所说的服务器负载均衡.可以将多个提供相同服务的设备(pool)虚拟成一个逻辑设备,供用户访问.也就是说,对于用 户来讲,看到的只有一个设备,而实际上用户是服务请求是在 ...
- Ico初步理解
Ico定义:是一个重要的面向对象编程的法则来削减计算机程序的耦合问题(解耦).通俗理解:把运行中程式的控制权从程式本身那里拿过来,放到配置文件中,通过"反射"找到匹配配置文件总的对 ...
- 初学lua --lua嵌入c++的一个问题(初始化lua出错,版本问题)
初学lua.从http://lua-users.org/wiki/CallingLuaFromCpp上下载了一个lua嵌入C++的代码.编译并运行.发现有错误: PANIC: unprotected ...
- python nose测试框架全面介绍七--日志相关
引: 之前使用nose框架时,一直使用--logging-config的log文件来生成日志,具体的log配置可见之前python nose测试框架全面介绍四. 但使用一段时间后,发出一个问题,生成的 ...
- iOS - Reveal逆向分析任意iOS应用的UI界面
在iOS逆向工程中,Reveal扮演着重要角色,一般情况下,Reveal在iOS开发过程中可以分析UI界面的状态,同样也可以应用于分析其他任意的App.Reveal是一个很强大的UI分析工具,可非常直 ...