php表单文件iframe异步上传实例讲解

本文实例为大家分享了php表单文件iframe异步上传的具体代码，供大家参考，具体内容如下

1.表单中放置iframe元素；
2.文件上传控件内容变化的时候触发JS设置表单的action为处理文件上传的img_upload_process.php文件，并且将表单的target设置为iframe，让iframe去提交到服务器进行文件上传；
3.img_upload_process.php中处理文件上传成功后，将上传成功保存的文件路径回传给表单中隐藏域；
4.点击表单提交按钮的时,JS设置表单action为接收表单数据的form_process.php文件，表单的target设置为_self。

表单：asyn_uplaod.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片异步上传</title>
</head>
<body>
<!-- application/x-www-form-urlencoded 缺省编码类型 -->
<!-- multipart/form-data 多媒体传输协议 ,方法必须是post 既可以发送文本数据，也支持二进制数据上载 -->
<form action="" method="post" enctype="multipart/form-data">
 用户名: <input type="text" name="username" /><br />
 上传头像: <input type="file" id="avator" name="avator" onchange="startUpload(this.form)" />

 <iframe frameborder='0' width='0' height='0' name="uploadframe"></iframe>
 <input type="hidden" id="save_path" name="save_path" />
 <span id="loading"></span> <br />
 <img width='100' height='100' id='uploaded_img' /> <br />
 <input type="submit" name="submitted" value="提交" onclick="formSubmit(this.form)" />

</form>

<script>

function startUpload(formObj){
  document.getElementById('loading').innerHTML = '上传中...';
  formObj.action = 'img_upload_process.php';
  formObj.target = 'uploadframe';
  formObj.submit();
}

function formSubmit(formObj) {
 formObj.action = 'form_process.php';
 formObj.target = '_self';

 //清空文件上传内容，防止重复提交
 var fileObj = document.getElementById('avator') ;

 // for IE, Opera, Safari, Chrome
 if (fileObj.outerHTML) {
  fileObj.outerHTML = fileObj.outerHTML;
 } else { // FF(包括3.5)
  fileObj.value = "";
 }

 formObj.submit();
}

</script>

</body>
</html>

处理文件上传：img_upload_process.php

<?php
include 'Upload.class.php';

$file = $_FILES['avator'];
$upload = new Upload();//上传工具类对象

if($save_path = $upload->up($file)){//上传成功
 echo <<<STR
 <script>
  window.parent.document.getElementById('uploaded_img').src = "$save_path";
  window.parent.document.getElementById('loading').innerHTML = '上传成功';
  window.parent.document.getElementById('save_path').value = "$save_path";
 </script>
STR;

}else{
 $error = $upload->error();
 echo <<<STR
 <script>
  window.parent.document.getElementById('uploaded_img').src = "";
  window.parent.document.getElementById('loading').innerHTML = "上传失败: $error";
 </script>
STR;

}

文件上传工具类：Upload.class.php

<?php
class Upload{
 private $path; //文件上传目录
 private $max_size; //上传文件大小限制
 private $errno; //错误信息号
 private $mime = array('image/jpeg','image/png','image/gif');//允许上传的文件类型

 /**
  * 构造函数,
  * @access public
  * @param $path string 上传的路径
  */
 public function __construct($path = './' ){
  $this->path = $path;
  $this->max_size = 1000000;
 }

 /**
  * 文件上传的方法，分目录存放文件
  * @access public
  * @param $file array 包含上传文件信息的数组
  * @return mixed 成功返回上传的文件名，失败返回false
  */
 public function up($file){
  //判断文件是否是通过 HTTP POST 上传，防止恶意欺骗
  /*
  if (! is_uploaded_file($file['tmp_name'])) {
   $this->errno = 5; //设置错误信息号为5，表示非法上传
   return false;
  }
  */

  //判断是否从浏览器端成功上传到服务器端
  if ($file['error'] == 0) {
   # 上传到临时文件夹成功,对临时文件进行处理
   //上传类型判断
   if (!in_array($file['type'], $this->mime)) {
    # 类型不对
    $this->errno = -1;
    return false;
   }

   //判断文件大小
   if ($file['size'] > $this->max_size) {
    # 大小超出配置文件的中的上传限制
    $this->errno = -2;
    return false;
   }

   //获取存放上传文件的目录
   $sub_path = date('Ymd').'/';
   if (!is_dir($this->path . $sub_path)) {
    # 不存在该目录，创建之
    mkdir($this->path . $sub_path);
   }

   //文件重命名,由当前日期 + 随机数 + 后缀名
   $file_name = date('YmdHis').uniqid().strrchr($file['name'], '.');

   //准备就绪了，开始上传
   if (move_uploaded_file($file['tmp_name'], $this->path . $sub_path . $file_name)) {
    # 移动成功
    return $sub_path . $file_name;
   } else {
    # 移动失败
    $this->errno = -3;
    return false;
   }

  } else {
   # 上传到临时文件夹失败，根据其错误号设置错误号
   $this->errno = $file['error'];
   return false;
  }

 }

 /**
  * 多文件上传方法
  * @access public
  * @param $file array 包含上传文件信息的数组，是一个二维数组
  * @return array 成功返回上传的文件名构成的数组, ?如果有失败的则不太好处理了
  */
 public function multiUp($files){
  //在多文件上传时，上传文件信息 又是一个多维数组，如$_FILES['userfile']['name'][0]，$_FILES['userfile']['name'][1]
  //我们只需要遍历该数组，得到每个上传文件的信息，依次调用up方法即可
  foreach ($files['name'] as $key => $value) {
   # code...
   $file['name'] = $files['name'][$key];
   $file['type'] = $files['type'][$key];
   $file['tmp_name'] = $files['tmp_name'][$key];
   $file['error'] = $files['error'][$key];
   $file['size'] = $files['size'][$key];
   //调用up方法，完成上传
   $filename[] = $this->up($file);
  }
  return $filename;
 }

 /**
  * 获取错误信息,根据错误号获取相应的错误提示
  * @access public
  * @return string 返回错误信息
  */
 public function error(){
  switch ($this->errno) {
   case -1:
    return '请检查你的文件类型，目前支持的类型有'.implode(',', $this->mime);
    break;
   case -2:
    return '文件超出系统规定的大小，最大不能超过'. $this->max_size;
    break;
   case -3:
    return '文件移动失败';
    break;
   case 1:
    return '上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值,其大小为'.ini_get('upload_max_filesize');
    break;
   case 2:
    return '上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值,其大小为' . $_POST['MAX_FILE_SIZE'];
    break;
   case 3:
    return '文件只有部分被上传';
    break;
   case 4:
    return '没有文件被上传';
    break;
   case 5:
    return '非法上传';
    break;
   case 6:
    return '找不到临时文件夹';
    break;
   case 7:
    return '文件写入临时文件夹失败';
    break;
   default:
    return '未知错误,灵异事件';
    break;
  }
 }
}

处理表单提交：form_process.php

<?php
var_dump($_REQUEST);
var_dump($_FILES);

点击表单提交按钮结果：

代码下载：php表单文件iframe异步上传

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Android异步上传图片到PHP服务器

    Android异步上传图片到PHP服务器

    原理 Android客户端模拟一个HTTP的Post请求到服务器端,服务器端接收相应的Post请求后,返回响应信息给给客户端. 背景 网上很多上传到java服务器上的,找了好久,找到了上传到php的了,思路跟我当初想的差不多,就是POST过去.废话不多说,直接上图看代码. php代码 <?php $target_path = "./upload/";//接收文件目录 $target_path = $target_path . basename( $_FILES['uploaded

  • PHP+AjaxForm异步带进度条上传文件实例代码

    在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: var object= { url:url, //form提交数据的地址 type:type, //form提交的方式(method:post/get) target:target, //服务器返回的响应数据显示的元素(Id)号 beforeSerialize:function(){} //序列化提交

  • php+ajax实现异步上传文件或图片功能

    本文为大家分享了ajax异步上传文件或图片功能的具体代码,供大家参考,具体内容如下 //html代码 <form enctype="multipart/form-data" id="upForm"> <input type="file" name="file" ><br><br> <input type="button" value="提交&q

  • PHP AjaxForm提交图片上传并显示图片源码

    本文实例为大家分享了PHP AjaxForm提交图片上传并显示图片的具体代码,供大家参考,具体内容如下 PHP dofile.php 文件上传源码 <?php $file_upload = "upload/"; $file_allow_ext='gif|jpg|jpeg|png|gif|zip|rar|ppt|xls|pdf|pptx|xlsx|docx'; $file_allow_size = 5*1024*1024; if($_POST['submit']=="上传

  • PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

    PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

    平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数 原理:ajaxfileupload是通过监听iframe的onload方

  • php表单文件iframe异步上传实例讲解

    php表单文件iframe异步上传实例讲解

    本文实例为大家分享了php表单文件iframe异步上传的具体代码,供大家参考,具体内容如下 1.表单中放置iframe元素: 2.文件上传控件内容变化的时候触发JS设置表单的action为处理文件上传的img_upload_process.php文件,并且将表单的target设置为iframe,让iframe去提交到服务器进行文件上传: 3.img_upload_process.php中处理文件上传成功后,将上传成功保存的文件路径回传给表单中隐藏域: 4.点击表单提交按钮的时,JS设置表单act

  • Ajax serialize() 表单进行序列化方式上传文件

    通过传统的 form 表单提交的方式上传文件 <form id="uploadForm" action="" method="post" enctype="multipart/form-data"> <p>上传文件:<input type ="file" name="file"/></p> <input type="subm

  • Python实现对百度云的文件上传(实例讲解)

    Python实现对百度云的文件上传(实例讲解)

    环境准备 python3.6 PyCharm 2017.1.3 Windows环境 框架搭建 selenium3.6 安装方法: pip install selenium 实现步骤: 一.步骤分析 1.选择"账号密码登录" 2.用户名.密码输入,登录 3.文件上传 注:本文主要介绍利用selenium包下的webdriver加载Firefox浏览器. 二.元素捕捉 利用火狐浏览器firebug插件复制控件的XPATH路径,注:Python3.6对应Firefox版本40.x,暂不支持最

  • Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

    前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20

  • 两种java文件上传实例讲解

    本文通过两种文件上传实例进行比较,帮助大家更好的学习java文件上传功能,具体内容如下 1. Java附件上传代码     @Controller public class UploadFile extends BaseJsonController{ /** * 附件上传 * * @param request * @param creativeFile * @param response * @return */ @RequestMapping(value = "/upload/uploadFi

  • php多个文件及图片上传实例详解

    本文实例讲述了php多个文件及图片上传的方法.分享给大家供大家参考.具体实现方法如下: 多个文件上传是在单文件上传的基础上利用遍历数组的方式进行遍历表单数组然后把文件一个个上传到服务器上了,下面就来看一个简单多个文件上传实例 多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: 复制代码 代码如下

  • 又拍云异步上传实例教程详解

    网站静态文件存储在又拍云,之前上传是通过又拍云的的FORM API进行. 当产品经理歪着脑袋走向你的时候,哎呀呀,这用户信息这里,上传要无刷新的效果了. 这他***,自己偷偷抱怨一会会,怎么搞喃?听说这家伙要一个好听的名字,异步上传,高大上档次挺像我的. 根据我们的观察,此处有两个重点: ①.怎么实现异步上传 ②.怎么上传到又 拍 云 首先我们要实现异步上传,就需要利用js里面的FormData对象,据说,这家伙不支持ie6 7的,ie8就不太清楚了,据说哈,说错了不负责的. 不过喃,我们也不用

  • Vue项目使用Websocket大文件FileReader()切片上传实例

    目录 使用技术 upfile.js文件 新增需求:对上传文件流进行加密,并传给后端做验证 还是在upfile.js文件(也可以单独放一个文件) 大文件上传,本地1.3G文件不到一分钟上传完毕 使用技术 Vue框架 WebSocket双向传输 FileReader读取文件 封装的WebSocket请求文件上传方法,目前只支持单文件上传,有研究出来多文件上传,记得评论哦 upfile.js文件 //file.slice(起始字节,终止字节)与FileReader实现文件切片读取 function P

  • asp.net 模拟提交有文件上传的表单(通过http模拟上传文件)

    asp.net 模拟提交有文件上传的表单(通过http模拟上传文件)

    我们暂且不说如何去模拟数据,通过一个简单的form看看当请求发生时,客户端提交了什么样的数据给服务端. 下面是一个简单的html form,两个文本输入框,一个文件上传(这里我选择一张图片),注意有文件上传的form的enctype属性. 复制代码 代码如下: <form action="sql.aspx" method="post" enctype="multipart/form-data"> <input id="

  • asp.net多文件上传实例讲解

    文件上传简单实现是非常容易的,但是想要更高的要求,比如通过ajax上传文件.一次上传多个文件.文件比较大等等,这里面的坑就不是很容易填(对于新手来说).因此在这里我准备通过ajax实现多文件上传.在开始贴代码之前,要注意几点: 1.<input type="file" />是必须要加name的,不知道为什么不加name属性,后台获取不到文件数据(有办法的大神可以在评论区提醒我),然后是multiple属性,当multiple="multiple"时,fi

随机推荐