使用jquery+iframe做一个ajax上传效果(实例)
时间:2019-03-31
本文章向大家介绍使用jquery+iframe做一个ajax上传效果(实例),主要包括使用jquery+iframe做一个ajax上传效果(实例)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>利用jquery+iframe做一个ajax上传效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> // 利用 jquery+iframe 做一个ajax上传效果 /* 思路: 1: 点击"提交"时的瞬间,生成一个iframe对象,插入body中 2: 修改form的target ,为iframe的name值 3: 给iframe加1个事件 ,onload */ $( function() { $('input:button').click(function(){ //alert('s'); var ifmname = 'ifm' + Math.random(); var ifm = $('<iframe width="0" height="0" frameborder="0" name="'+ ifmname +'">'); ifm.appendTo($('body')); $('form').attr('target',ifmname); $('form').submit(); $('#progress').html('<img src="<img src="//files.jb51.net/file_images/article/201708/loading.gif" alt="" />" border="0">'); ifm.load(function(){ $('#progress').html('上传完毕'); this.remove(); }); }); } ); </script> <style type="text/css"> </style> </head> <body> <div id="progress"></div> <form action="upfile.php" method="post" enctype="multipart/form-data" target="upfile"> <input type="file" name="pic" /><br /> <input type="button" value="提交" /> </form> </body> </html>
upfile.php
echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';
以上这篇使用jquery+iframe做一个ajax上传效果(实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- SpringMVC 文件下载时 浏览器不能正确显示另存的文件名
- 手把手教你用python抢火车票
- SpringMVC 实现多文件上传的两种方式及其效率比较
- Spring 之加载配置属性文件和注解属性绑定
- SpringMVC 提交表单400 Bad Request
- 如何在三年内快速成长为一名技术专家
- 【微信开发】getAccessToken 和 getJsapi_ticket缓存支持
- 微信JS-SDK 注入权限验证配置
- Maven 项目下slf4j 包冲突问题
- 谷歌教你学 AI-第三讲简单易懂的估算器
- 黑产是如何强刷用户银行卡8.1万元的?
- Spring 必知概念(二)
- 利用iText 组件导出PDF
- 利用POI组件导出Excel的简单示例
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法