您的位置：首页 > 编程技术 > php  >  PHP Ajax文件异步上传代码（XMLHttpRequest）例子

PHP Ajax文件异步上传代码（XMLHttpRequest）例子

 更新时间：2016年11月25日 15:35  点击：1490
文件异步上传通常是通过ajax实现了，也有朋友说使用iframe来实现这个虽然说可以达到目的但不是真正的a异步上传了并且如果浏览器不支持irame那么iframe模仿上传就无效了，下面我们来看一段真正的文件异步上传例子。

PHP 代码：

$fileName = $_FILES['afile']['name'];
$fileType = $_FILES['afile']['type'];
$fileContent = file_get_contents($_FILES['afile']['tmp_name']);
$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);

$json = json_encode(array(
  'name' => $fileName,
  'type' => $fileType,
  'dataUrl' => $dataUrl,
  'username' => $_REQUEST['username'],
  'accountnum' => $_REQUEST['accountnum']
));

echo $json;


Html 及 JS 代码

<!DOCTYPE html>
<!--
Copyright 2012 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Author: Eric Bidelman (ericbidelman@chromium.org)
-->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>xhr.send(FormData) Example</title>
</head>
<body>
 
<input type="file" name="afile" id="afile" accept="image/*"/>
 
<script>
document.querySelector('#afile').addEventListener('change', function(e) {
  var file = this.files[0];

  var fd = new FormData();
  fd.append("afile", file);
  // These extra params aren't necessary but show that you can include other data.
  fd.append("username", "Groucho");
  fd.append("accountnum", 123456);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'handle_file_upload.php', true);
 
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded');
    }
  };

  xhr.onload = function() {
    if (this.status == 200) {
      var resp = JSON.parse(this.response);

      console.log('Server got:', resp);

      var image = document.createElement('img');
      image.src = resp.dataUrl;
      document.body.appendChild(image);
    };
  };

  xhr.send(fd);
}, false);
</script>
<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->
</body>
</html>

现在移动端兴起，很多地方都要运用接口为它们传输数据，那么是用xml好还是用json好呢？个人觉得用json是不错的选择。我从以下几点分析一下：

1. xml标签要成对的书写，比如

<list><name>XXX</name><name>XXX</name></list>，而json写法是{"name":"XXX","name":"XXX"}，

所以很明显json更节约传输的容量。

2. json生成和解析数据都比较简单，以php为例，只需用一个json_encode函数就可以将一个数组转为json数据了，而xml生成过程相对会麻烦一点。

3. json扩展比较方便，解析速度也较快一点。

所以项目中没有特别的规定，还是用json比较好。
 

一般认识url传递参数是以get方式，不过我们也可以用post传递，特别是在做一些接口时，非常有用，本文我们列举了用php和Javascript实现的方法。

PHP实现方法

在做接口，post传递方式，数据以字符串形式传输，返回数据用JSON封装。

然后就开始各种测试啊。

分享最终的方法:

定义抓取函数：

function http_post_data($url, $data_string) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        'Content-Type: application/json; charset=utf-8',
        'Content-Length: ' . strlen($data_string))
    );
    ob_start();
    curl_exec($ch);
    $return_content = ob_get_contents();
    ob_end_clean();
    $return_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    return array($return_code, $return_content);
}



然后是方法：

$url  = "路径";
$data = array(); //数组
$data = json_encode($data);  //转化为字符串
list($return_code, $return_content) = http_post_data($url, $data);
$return_content = json_decode($return_content,1);
var_dump($return_content); //输出返回结果。





window.open url 参数post方式传递

最近在做web项目，碰到需要跨页面传递参数的功能，就是那种需要把当前页面的内容带到新开的子窗体中，以前的做法是传一个id过去，然后在新窗口中去读数据库的内容。虽然不怎么麻烦，但是如果内容么有在数据库里保存，仅仅是处以拟稿状态时，就不能实现了，用户还常常认为是个bug。考虑采用get的方式传递，把需要的内容都序列化然后，通过url去传，显得很臃肿，而且get的传递内容长度有限制。于是就想到用post的方式传递，问题在于open方法不能设置请求方式，一般网页的post都是通过form来实现的。如果仅仅模拟form的提交方式，那么open方法里那种可设置窗体属性的参数又不能用。最后想办法整了这么一个两者结合的方式，将form的target设置成和open的name参数一样的值，通过浏览器自动识别实现了将内容post到新窗口中。

比较有意思的是直接通过调用form的submit方法不能触发onsubmit事件，查看了帮助文档，必须手动的触发，否则只能看到页面刷新而没有打开新窗口。代码中只传递了一个参数内容，实际可传递多个。
具体代码如下：

function openPostWindow(url,name,data) 
{ 
    var tempForm = document.createElement("form"); 
    tempForm.id="tempForm1"; 
    tempForm.method="post"; 
    tempForm.action=url; 
    tempForm.target=name; 
    var hideInput = document.createElement("input"); 
    hideInput.type="hidden"; 
    hideInput.name= "content"
    hideInput.value= data;
    tempForm.appendChild(hideInput);  
    tempForm.attachEvent("onsubmit",function(){ openWindow(name); });
    document.body.appendChild(tempForm); 
    tempForm.fireEvent("onsubmit");
    tempForm.submit();
    document.body.removeChild(tempForm);
    return false;
}
function openWindow(name) 
{ 
    window.open('about:blank',name,'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes');  
} 
</script>





调用：

<A href="javascript:void(0);" onClick="openPostWindow('noWriteSiteInfo.jsp','noWriteSiteInfo','<%=lowerOffset %>');">
   这里是调用；  
 </A>



注意红色部分 如果没有这个，会导致页面上<jsp:include page=""/> 这种页面丢失，这是 链接的href 和 onclick 共存问题，

请求的链接是用的 A 标签，A上同时写了href和onclick事件。对于链接 A 标签而言，当用户鼠标单击的时候，A对象被触发时会首先去执行onclick部分，然后是href。

解决方法就是：

直接把onclick事件写在href中：href="javascript:openPostWindow(。。。)"
还有一种解决方案：<a href="javascript:void(0)" onclick="do();return false;">Test</a>
这样是忽略了href部分，这对于通过onclick传递this，或者无法避开a对象时都有用。

在许多大的网站我们都会看到点击分享就可以把数据分享到微信或ＱＱ或其它的平台了，下面我们来看一段php版微信自定义分享代码，代码参考官方开发的没有任何问题。


分享需要认证微信订阅号或者服务号。

php 代码(thinkphp)：

$appid='xxx';
 $appsecret='xxxx';
 
 $timestamp = time();
 $noncestr = $this->getRandStr(15);
 
 // dump();
 
 $url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='. $this->get_token($appid,$appsecret) .'&type=jsapi';
 $ret_json = $this->curl_get_contents($url);
 $ret = json_decode($ret_json);
 $ticket = $ret-> ticket;
 //var_dump($ret);
 $strvalue = 'jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'&timestamp='.$timestamp.'&url=http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
 $signature = sha1($strvalue);
 
 $this->assign('timestamp',$timestamp);
 $this->assign('nonceStr',$noncestr);
 $this->assign('signature',$signature);
 
 
function get_token($appid,$appsecret){
 if(S('access_token')) return S('access_token');
 $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$appsecret";
 $ret_json = $this->curl_get_contents($url);
 $ret = json_decode($ret_json);
 if($ret -> access_token){
 S('access_token',$ret -> access_token,7200);
 return $ret -> access_token;
 }
}
 
 
function is_weixin(){
if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) {
return true;
}
return false;
}
 
function getRandStr($length){
 $str = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 $randString = '';
 $len = strlen($str)-1;
 for($i = 0;$i < $length;$i ++){
 $num = mt_rand(0, $len);
 $randString .= $str[$num];
 }
 return $randString;
}
 
&nbsp;
 
function curl_get_contents($url){
 $ch = curl_init();
 curl_setopt($ch, CURLOPT_URL, $url);
 curl_setopt($ch, CURLOPT_TIMEOUT, 1);
 curl_setopt($ch, CURLOPT_MAXREDIRS, 200);
 curl_setopt($ch, CURLOPT_USERAGENT, _USERAGENT_);
 curl_setopt($ch, CURLOPT_REFERER, _REFERER_);
 @curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
 curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
 $r = curl_exec($ch);
 curl_close($ch);
 return $r;
}
 
js代码：

需要引入： http://res.wx.qq.com/open/js/jweixin-1.0.0.js
 
wx.config({
 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 appId: 'wxae7c36a1349c5868', // 必填，公众号的唯一标识
 timestamp: '{$timestamp}', // 必填，生成签名的时间戳
 nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
 signature: '{$signature}',// 必填，签名，见附录1
 jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
 
wx.ready(function(){
wx.onMenuShareTimeline({
 title: '{$contentInfo.title}', // 分享标题
 link: window.location.href, // 分享链接
 imgUrl: 'http://'+window.location.host+'{$categoryInfo.image}', // 分享图标
 success: function () {
 // 用户确认分享后执行的回调函数
 //alert(1111);
 //fxfunc();
 },
 cancel: function () {
 // 用户取消分享后执行的回调函数
 //alert("您取消了分享");
 }
});
 
&nbsp;
 
wx.onMenuShareAppMessage({
 title: '{$contentInfo.title}', // 分享标题
 desc: removeHTMLTag('{$contentInfo.content}'), // 分享描述
 link: window.location.href, // 分享链接
 imgUrl: 'http://'+window.location.host+'{$categoryInfo.image}', // 分享图标
 type: '', // 分享类型,music、video或link，不填默认为link
 dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
 success: function () {
 // 用户确认分享后执行的回调函数
 //fxfunc();
 },
 cancel: function () {
 //alert("您取消了分享");
 // 用户取消分享后执行的回调函数
 }
});
 // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
 
function removeHTMLTag(str) {
 str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
 str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
 //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
 str=str.replace(/&nbsp;/ig,'');//去掉&nbsp;
 return str;
 }

递归算法虽然不是高性能的算法但是递归我们用到的非常的多，如目录遍历或树形结构都会有用到了，下面一起来看小编整理了一些关于递归算法的解析与例子。


递归函数为自调用函数，在函数体内直接或间接自己调用自己，但需要设置自调用的条件，若满足条件，则调用函数本身，若不满足则终止本函数的自调用，然后把目前流程的主控权交回给上一层函数来执行，可能这样给大家讲解，还是很难明白，直接上例子

function test ($n){
echo $n.”  “;
if($n>0){
test($n-1);
}else{
echo “<–>”;
}
echo $n.”  ”
}
test(2)

这个例子最终的输出结果是2 1 0<–>0 1 2

我解释下  为何输出是这样的

第一步，执行test(2)，echo 2，然后因为2>0，执行test(1)， 后面还有没来得及执行的echo 2
第二步，执行test（1），echo 1，然后因为1>0，执行test（0），同样后面还有没来得及执行的 echo 1
第三步，执行test（0），echo 0，执行test（0），echo 0，  此时0>0的条件不满足，不在执行test（）函数，而是echo “<–>”，并且执行后面的 echo 0

此时函数已经不再调用自己，开始将流程的主控权交回给上一层函数来执行，也就是开始执行刚刚所有test（）函数没来得及输出的最后一个echo，0的一层是1也就是输出1  1的上一层是2 也就是输出2    2没有山一层  所以呢   输出的内容就是2 1 0<–>0 1 2

例子

,我们要遍历一个文件夹里面的所有目录，列出里面所有的文件，PHP本身自带的有一个readdir的函数，不过只能读取当前的目录，根据这个函数，我写了另外一个函数，用来实现我的需求。函数的原理很简单，主要就是用了一下递归调用。

function file_list($path){
    if ($handle = opendir($path)) {
        while (false !== ($file = readdir($handle))) {
            if ($file != "." && $file != "..") {
                if (is_dir($path."/".$file)) {
                    echo $path.": ".$file."<br>";//去掉此行显示的是所有的非目录文件
                    file_list($path."/".$file);
                } else {
                    echo $path.": ".$file."<br>";
                }
            }
        }
    }
}

例子

递归的应用

中序遍历二叉树

void inorder (BinTree T){  
if (T){  
inorder(T->lchild);  
printf(“%c”,T->data);  
inorder(T->rchild);  
}  
}

[!--infotagslink--]

相关文章

  • php读取zip文件(删除文件,提取文件,增加文件)实例

    下面小编来给大家演示几个php操作zip文件的实例，我们可以读取zip包中指定文件与删除zip包中指定文件，下面来给大这介绍一下。 从zip压缩文件中提取文件 代...2016-11-25

  • Jupyter Notebook读取csv文件出现的问题及解决

    这篇文章主要介绍了JupyterNotebook读取csv文件出现的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2023-01-06

  • Photoshop打开PSD文件空白怎么解决

    有时我们接受或下载到的PSD文件打开是空白的，那么我们要如何来解决这个 问题了，下面一聚教程小伙伴就为各位介绍Photoshop打开PSD文件空白解决办法。 1、如我们打开...2016-09-14

  • C#操作本地文件及保存文件到数据库的基本方法总结

    C#使用System.IO中的文件操作方法在Windows系统中处理本地文件相当顺手,这里我们还总结了在Oracle中保存文件的方法,嗯,接下来就来看看整理的C#操作本地文件及保存文件到数据库的基本方法总结...2020-06-25

  • 解决python 使用openpyxl读写大文件的坑

    这篇文章主要介绍了解决python 使用openpyxl读写大文件的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-13

  • C#实现HTTP下载文件的方法

    这篇文章主要介绍了C#实现HTTP下载文件的方法,包括了HTTP通信的创建、本地文件的写入等,非常具有实用价值,需要的朋友可以参考下...2020-06-25

  • SpringBoot实现excel文件生成和下载

    这篇文章主要为大家详细介绍了SpringBoot实现excel文件生成和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-02-09

  • php无刷新利用iframe实现页面无刷新上传文件(1/2)

    利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数，该参数为从客户端获取的$_files变量，返回重新命名后的文件名，如果上传失...2016-11-25

  • php批量替换内容或指定目录下所有文件内容

    要替换字符串中的内容我们只要利用php相关函数，如strstr,str_replace,正则表达式了，那么我们要替换目录所有文件的内容就需要先遍历目录再打开文件再利用上面讲的函数替...2016-11-25

  • PHP文件上传一些小收获

    又码了一个周末的代码，这次在做一些关于文件上传的东西。（PHP UPLOAD）小有收获项目是一个BT种子列表，用户有权限上传自己的种子，然后配合BT TRACK服务器把种子的信息写出来...2016-11-25

  • 如何在Spring WebFlux的任何地方获取Request对象

    这篇文章主要介绍了如何在Spring WebFlux的任何地方获取Request对象，帮助大家更好的理解和使用springboot框架，感兴趣的朋友可以了解下...2021-01-26

  • AI源文件转photoshop图像变模糊问题解决教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说下AI源文件转photoshop图像变模糊问题的解决教程，各位想知道具体解决方法的使用者们，那么下面就快来跟着小编...2016-09-14

  • C++万能库头文件在vs中的安装步骤(图文)

    这篇文章主要介绍了C++万能库头文件在vs中的安装步骤(图文)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-23

  • Zend studio文件注释模板设置方法

    步骤：Window -> PHP -> Editor -> Templates，这里可以设置（增、删、改、导入等）管理你的模板。新建文件注释、函数注释、代码块等模板的实例新建模板，分别输入Name、Description、Patterna)文件注释Name: 3cfileDescriptio...2013-10-04

  • C#路径,文件,目录及IO常见操作汇总

    这篇文章主要介绍了C#路径,文件,目录及IO常见操作,较为详细的分析并汇总了C#关于路径,文件,目录及IO常见操作,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • php文件上传你必须知道的几点

    本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项，下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21

  • C#使用StreamWriter写入文件的方法

    这篇文章主要介绍了C#使用StreamWriter写入文件的方法,涉及C#中StreamWriter类操作文件的相关技巧,需要的朋友可以参考下...2020-06-25

  • ant design中upload组件上传大文件,显示进度条进度的实例

    这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29

  • php实现文件下载实例分享

    举一个案例：复制代码 代码如下:<?phpclass Downfile { function downserver($file_name){$file_path = "./img/".$file_name;//转码，文件名转为gb2312解决中文乱码$file_name = iconv("utf-8","gb2312",$file_name...2014-06-07

  • 查找php配置文件php.ini所在路径的二种方法

    通常php.ini的位置在：复制代码 代码如下:/etc目录下或/usr/local/lib目录下。如果你还是找不到php.ini或者找到了php.ini修改后不生效(其实是没找对)，请使用如下办法：1.新建php文件，写入如下代码复制代码 代码如下:<?phpe...2014-05-31