php教程分享

  1. php教程首页
  2. php上传下载

PHP+iframe模拟Ajax上传文件功能示例

•php上传下载•阅读 295

本文实例讲述了PHP+iframe模拟Ajax上传文件功能，分享给大家供大家参考，具体如下：

在xmlhttprequest level 1中，Ajax是不能够上传文件的，因为js不能操作本地文件，但是市场上有一些Ajax异步上传文件的插件，是怎么完成的呢？答案：可以使用iframe模拟Ajax上传文件。接下来博主将使用iframe来模拟Ajax来上传文件。

首先看一下效果图：

PHP+iframe模拟Ajax上传文件功能示例

文件结构图：

PHP+iframe模拟Ajax上传文件功能示例

09-iframe-upload.html文件：

页面中有一个表单，表单中有一个上传文件按钮和提交按钮，点击提交按钮执行ajaxUpload函数，然后动态创建iframe标签，让其不可见，最后设置表单的target属性指向iframe。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>iframe模拟Ajax上传文件</title>
  7. <link rel="stylesheet" href="">
  8. </head>
  9. <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
  10. <script>
  11. /**
  12. * 文件上传
  13. * @return bool 是否提交表单
  14. * 1、捕捉表单提交的动作
  15. * 2、动态创建iframe标签，然其不可见
  16. * 3、设置表单的target属性指向iframe
  17. */
  18. function ajaxUpload(){
  19. var iframeName = 'upload'+Math.random();//给iframe取名
  20. $('<iframe name='+iframeName+' width="0" height="0" frame></iframe>').appendTo($('body'));//动态创建iframe
  21. $('form:first').attr('target',iframeName);//设置form的target属性
  22. $('#progress').html('<img src="progress.jpg"/>');//显示上传是否成功
  23. //return false;
  24. }
  25. </script>
  26. <body>
  27. <h1>iframe模拟Ajax上传文件</h1>
  28. <h2 ></h2>
  29. <form action="09-iframe-upload.php" method="post" enctype="multipart/form-data" onsubmit="return ajaxUpload();">
  30. <p><input type="file" name="pic"/></p>
  31. <p><input type="submit" value="提交" /></p>
  32. </form>
  33. </body>
  34. </html>

09-iframe-upload.php文件：

首先延时3秒，为了能看到加载的图片，然后判断是否有上传文件，然后返回一段Js代码，这段js是在页面中显示是否上传成功

  1. <?php
  2. /**
  3. * iframe模拟Ajax上传文件
  4. * @author webbc
  5. */
  6. sleep(3);//延时3秒
  7. if(emptyempty($_FILES)){
  8. echo 'no file';
  9. }
  10. $error = $_FILES['pic']['error'] == 0?'succ':'fail';//判断上传是否成功
  11. echo "<script>parent.document.getElementById('progress').innerHTML='$error'</script>";//显示上传是否成功
  12. ?>
赞 (3)
上一篇10-8
下一篇 12-29

相关推荐

  • 使用 Snoopy 代理异步文件上传

    使用Snoopy代理异步文件上传使用formdata结合snoopy做请求转发，实现非form形式，非iframe形式的异步文件上传功能。JS代码：document.getElementById('#file').change=functi…
    •php上传下载
    2015-04-228964

  • PHP + jQuery Ajax文件无刷新上传文件

    PHP+jQueryAjax文件无刷新上传文件PHP+jQueryAjax文件上传实例。因为看到一些朋友询问如何实现PHP环境下的网页上传功能，自己这几天刚用了jQuery_upload_multiple上传插件，所以在这里把用法给大家说一…
    •php上传下载
    2015-12-0112556

  • php ajax无刷新上传图片实例代码

    phpajax无刷新上传图片实例代码将index.html和upload.php文件保存到支持php的空间的同级目录，测试运行即可AJAX客户端页面代码：index.html<html><body><h1>…
    •php上传下载
    2016-02-2210975

  • 基于PHP的AJAX技术实现文件异步上传

    基于PHP的AJAX技术实现文件异步上传异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到，必须解决的问题。但是标准的AJAX类(XmlHttpRequest)无法实现传输文件的功能。因此，这里讨论的内容就是如何在AJAX的技术…
    •php上传下载
    2016-08-2318245

  • PHP+apc+ajax实现的ajax_upload上传进度条代码

    本文实例讲述了PHP+apc+ajax实现的ajax_upload上传进度条代码，分享给大家供大家参考，具体如下：上传进度条是怎么实现的呢?原理是怎么样的呢?当我们浏览，选择上传后，会产生一个临时文件，上传的时把这个临时文件，上传到服务器，上传完成后，这个临时文件会被删除掉。如果我们能读取这个临时文件的大小，就知道上传进度是多少了，phpapc模块可以实现这个功能。一、安装apc模块下载地址:ht…
    •php上传下载
    2023-06-05265

  • PHP基于curl模拟post提交json数据示例

    本文实例讲述了PHP基于curl模拟post提交json数据。分享给大家供大家参考，具体如下：这里php模拟post提交json数据操作的关键是在头部设置Content-Type:<?phpheader("Content-type:application/json;charset=utf-8");$url="http://192.168.10.234:8080/uc/login/logini…
    •php高级应用
    2023-06-10594
  • php上传多张图片时，选择图片后即可预览的问题php上传下载

    php上传多张图片时，选择图片后即可预览的问题

    这几天一直在解决一个问题，上传图片时选择成功后就能预览。需求：在点击上传图标的时候会在前面的input框中显示出文件名，然后点击后面的查看按钮就可以预览选择的这张图片了，要求不能刷新页面1.一开始的时候打算用ajax上传，后来发现多张图片一同上传的时候会出现问题，ajax上传图片的原理是当你选中一张图片的时候会使用js在这个type为file的input的框外面包上一个form表单然后通过ajax…
    2023-08-07199

  • 用php如何解决大文件分片上传问题

    这篇文章主要介绍了php大文件分片上传如何解决，是个非常不错的思路，大家可以看看。如果上传的文件只有小于10M的话,就没必要考虑这样的做法,直接在php.ini中更改一下upload_max_filesize=10mpost_max_size=10m这样就可以了,下面我们来说一说php上传超大的文件前提首先,上传超大的文件,前端要和后端相互配合文件上传要使用ajax的方法,而不是form的subm…
    •php上传下载
    2023-08-07319