iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >iframe中怎么实现Ajax文件上传效果
  • 891
分享到

iframe中怎么实现Ajax文件上传效果

2024-04-02 19:04:59 891人浏览 八月长安
摘要

本篇文章为大家展示了iframe中怎么实现ajax文件上传效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。复制代码 代码如下:<span >avasc

本篇文章为大家展示了iframe中怎么实现ajax文件上传效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

复制代码 代码如下:


<span >avascript部分</span>

复制代码 代码如下:


<!doctype html>
<html>
<head>
<meta charset=utf-8>
<head>
<title>ajax 文件上传~~</title>
</head>
<script>
window.onload=function(){
var fORM=document.getElementsByTagName('form')[0];
form.onsubmit=function(){
var iframe=document.createElement('iframe');
iframe.src='do_upload.PHP';
var iframe_name="iframe"+Math.random();
iframe.name=iframe_name;
document.body.appendChild(iframe);
iframe.style.width='0px';
iframe.style.height='0px';
iframe.frameBorder='0';
form.target=iframe_name;
}
}
</script>
<body>
<form enctype='multipart/form-data' method='post' action='do_upload.php'>
请选择文件:<input type='file' name='myFile'/><br/>
<input type='submit'/>
<div id='msg'></div>
</form>
</body>
</html>


//php接收部分

复制代码 代码如下:


<?php
$up_file=$_FILES['myFile'];
if($up_file['error']===0){
if(!file_exists('./imgs')){
mkdir('./imgs');
}
$save_name=rand().$up_file['name'];
$bool=move_uploaded_file($up_file['tmp_name'],"./imgs/$save_name");
if($bool){
$msg='上传成功!';
}else{
$msg='上传失败!';
}
}
echo
"<script>
var msg=parent.document.getElementById('msg');
msg.innerHTML='<font color=red>$msg</forn>';
</script>";
?>

上述内容就是iframe中怎么实现Ajax文件上传效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网VUE频道。

--结束END--

本文标题: iframe中怎么实现Ajax文件上传效果

本文链接: https://www.lsjlt.com/news/67827.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iframe中怎么实现Ajax文件上传效果
    本篇文章为大家展示了iframe中怎么实现Ajax文件上传效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。复制代码 代码如下:<span >avasc...
    99+
    2024-04-02
  • Ajax和form+iframe怎么实现文件上传
    这篇文章将为大家详细讲解有关Ajax和form+iframe怎么实现文件上传,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。HTML5Ajax上传html5的上传实现,是需要file控件以及XMLHttpR...
    99+
    2023-06-08
  • 如何使用jquery+iframe做一个ajax上传效果
    这篇文章给大家分享的是有关如何使用jquery+iframe做一个ajax上传效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。html页面<!DOCTYPE h...
    99+
    2024-04-02
  • Ajax怎么实现文件上传功能
    这篇文章主要介绍“Ajax怎么实现文件上传功能”,在日常操作中,相信很多人在Ajax怎么实现文件上传功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ajax怎么实现文件上传...
    99+
    2024-04-02
  • 原生ajax和iframe框架如何实现图片文件上传
    这篇文章主要为大家展示了“原生ajax和iframe框架如何实现图片文件上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“原生ajax和iframe框架如何实现...
    99+
    2024-04-02
  • Ajax中怎么实现文件上传带进度条
    这篇文章将为大家详细讲解有关Ajax中怎么实现文件上传带进度条,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。(1)创建上传对象在应该Common-FileU...
    99+
    2024-04-02
  • 使用AJAX实现上传文件
    本文实例为大家分享了使用AJAX实现上传文件的具体代码,供大家参考,具体内容如下 需求: 在前端页面选择文件上传到服务器的指定位置 前端代码 <form id="upl...
    99+
    2024-04-02
  • HTML5+Ajax文件上传进度条怎么实现
    这篇文章主要介绍了HTML5+Ajax文件上传进度条怎么实现,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。原本打算使用jquery插件进行异...
    99+
    2024-04-02
  • jQuery中如何实现Ajax方式上传文件
    这篇文章主要介绍jQuery中如何实现Ajax方式上传文件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!jQuery Ajax方式上传文件用到两个对象第一个对象:FormData第二...
    99+
    2024-04-02
  • Ajax如何实现异步上传文件
    这篇文章将为大家详细讲解有关Ajax如何实现异步上传文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体代码如下所示:<!DOCTYPE html>...
    99+
    2024-04-02
  • MVC中怎么基于Ajax和HTML5实现文件上传功能
    这篇文章主要讲解了“MVC中怎么基于Ajax和HTML5实现文件上传功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“MVC中怎么基于Ajax和HTML5实...
    99+
    2024-04-02
  • JavaWeb中怎么实现文件上传
    这期内容当中小编将会给大家带来有关JavaWeb中怎么实现文件上传,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。引入依赖当然在引入依赖之前我们需要先创建一个被Maven管理的Web Project,创建方...
    99+
    2023-06-19
  • asp.net中表单上传功能如何实现ajax文件异步上传
    这篇文章主要为大家展示了“asp.net中表单上传功能如何实现ajax文件异步上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“asp.net中表单上传功能如何...
    99+
    2024-04-02
  • ajax怎么实现异步文件或图片上传功能
    这篇文章主要介绍ajax怎么实现异步文件或图片上传功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!大家好,这篇文章我要给大家分享一个网页文件上传功能的代码,希望大家可以有所参考,或者给我提些建议。众所周知现在的各大...
    99+
    2023-06-08
  • 如何实现fileUpload文件上传带进度条效果
    这篇文章将为大家详细讲解有关如何实现fileUpload文件上传带进度条效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图:服务器端servlet:public&n...
    99+
    2024-04-02
  • jquery中Form怎么实现文件上传
    这篇文章给大家分享的是有关jquery中Form怎么实现文件上传的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。①先是html<a href="javas...
    99+
    2024-04-02
  • 怎么在ajax中利用formdata流上传文件
    今天就跟大家聊聊有关怎么在ajax中利用formdata流上传文件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。//html如下//form1<form class=...
    99+
    2023-06-08
  • 怎么在html中使用ajax上传大文件
    这篇文章给大家介绍怎么在html中使用ajax上传大文件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。html有什么特点1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。2、可...
    99+
    2023-06-08
  • PHP 与 Ajax:实现实时的文件上传功能
    如何使用 php 和 ajax 实现实时文件上传?在 php 中配置文件上传并设置权限。创建一个服务器端脚本处理上传。使用 jquery 编写一个客户端脚本来处理 ajax 请求。在 h...
    99+
    2024-05-12
    php ajax
  • layui怎么实现文件上传
    这篇文章将为大家详细讲解有关layui怎么实现文件上传,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE html> &l...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作