php+ajax实现图片文件上传功能实例


Posted in PHP onJune 17, 2014

目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子。

方法一,利用jquery ajaxfileupload.js实现文件上传

其实就是实现无刷新式的文件上传。可采用IFRAME文件上传原理。
实际上在用PHP上传文件时。。。只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真实际上传的(但是还是有很多人这样做,刚开始时我也是)。
可是功能上又要要求实现所谓的“异步上传”,怎么办呢?只能借助于第三方的组件,或者自己写一个(在网页里嵌入一个IFRAME)。但如果是考虑开发时间,建议用第三方的,这里有一个不错的jQuery 的Ajax文件上传的组件,即“ajaxfileupload.js",其组件下载地址为://img.jbzj.com/file_images/article/201306/js/ajaxfileupload.js

过程:

(1 )前端文件的代码: test.php

<script type="text/javascript" src="jquery.js"></script> 
 <script type="text/javascript" src="ajaxfileupload.js"></script>
 <script type="text/javascript">
 function ajaxFileUpload()
{
$.ajaxFileUpload
(
  {
 url:'doajaxfileupload.php', //你处理上传文件的服务端
 secureuri:false,
 fileElementId:'img',
 dataType: 'json',
 success: function (data)
 {
alert(data.file_infor);
 }
 }
 )
  return false;
  } 
  </script>
相应的HTML为:
  <input id="img" type="file" size="45" name="img" class="input">
  <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>

这样客户端就完成了。

(2) 在服务器端的doajaxfileupload.php

此处为了简便的检测是否真正的传值过来了,你可以将它存起来了。

$file_infor = var_export($_FILES,true);
 file_put_contents("d:file_infor.php".$file_infor);

 这样你打来刚生成的file_infor.php文件时,你又看到了熟悉的信息了:

array(
 'name'=>'lamp.jpg',
 'type'=>'image/pjpeg',
 'tmp_name'=>'c:windowstempphpFA.tmp',
 'error'=>0,
 'size'=>3127
)

当然,真正的处理类于这样的:

<?php
  $upFilePath = "d:/";
  $ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);
if($ok === FALSE){
 echo json_encode('file_infor'=>'上传失败');
}else{
 echo json_encode('file_infor'=>'上传成功');
}
?>

方法二,利用iframe框架上传图片

html代码如下:

<div class="frm">
  <form name="uploadFrom" id="uploadFrom" action="upload.php" method="post"  target="tarframe" enctype="multipart/form-data">
   <input type="file" id="upload_file" name="upfile">
  </form>
  <iframe src=""  width="0" height="0" style="display:none;" name="tarframe"></iframe>
 </div>
 <div id="msg">
 </div>

index.js文件:

$(function(){
 $("#upload_file").change(function(){
   $("#uploadFrom").submit();
 });
});
function stopSend(str){
 var im="<img src='upload/images/"+str+"'>";
 $("#msg").append(im);
}

upload.php文件:

<?php
 $file=$_FILES['upfile'];
 $name=rand(0,500000).dechex(rand(0,10000)).".jpg";
 move_uploaded_file($file['tmp_name'],"upload/images/".$name);
//调用iframe父窗口的js 函数
 echo "<script>parent.stopSend('$name')</script>";
?>

方法三,原生态ajax文件上传

<!DOCTYPE html>
<html>
<head>
    <title>Html5 Ajax 上传文件</title>
    <meta charset="utf-8">
<script type="text/javascript">
    var xhr;
    function createXMLHttpRequest()
    {
        if(window.ActiveXObject)
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            xhr = new XMLHttpRequest();
        }
    }
    function UpladFile()
    {
        var fileObj = document.getElementById("file").files[0];
        var FileController = 'upload.php';
        var form = new FormData();
        form.append("myfile", fileObj);
        createXMLHttpRequest();
        xhr.onreadystatechange = handleStateChange;
        xhr.open("post", FileController, true);
        xhr.send(form);
    }
    function handleStateChange()
    {
        if(xhr.readyState == 4)
        {
            if (xhr.status == 200 || xhr.status == 0)
            {
                var result = xhr.responseText;
                var json = eval("(" + result + ")");
                alert('图片链接:n'+json.file);
            }
        }
    }
</script>
<style>
    .txt{ height:28px; border:1px solid #cdcdcd; width:670px;}
    .mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #CDCDCD;height:30px; width:70px;}
    .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="form-group">
    <label class="control-label">图片</label>
    <br/>
    <input type='text' name='textfield' id='textfield' class='txt' />
    <span onclick="file.click()"  class="mybtn">浏览...</span>
    <input type="file" name="file" class="file" id="file" size="28" onchange="document.getElementById('textfield').value=this.value" />
    <span onclick="UpladFile()" class="mybtn">上传</span>
</div>
</body>
</html>

php代码:

<?php
if(isset($_FILES["myfile"]))
{
$ret = array();
$uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;
file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
if(!is_array($_FILES["myfile"]["name"])) //single file
{
$fileName = time().uniqid().'.'.pathinfo($_FILES["myfile"]["name"])['extension'];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
$ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echo json_encode($ret);
}
?>
PHP 相关文章推荐
PHP中的串行化变量和序列化对象
Sep 05 PHP
PHP+javascript模拟Matrix画面
Oct 09 PHP
mysql_num_rows VS COUNT 效率问题分析
Apr 23 PHP
php array的学习笔记
May 16 PHP
在Debian系统下配置LNMP的教程
Jul 09 PHP
php metaphone()函数的定义和用法
May 15 PHP
PHP支付系统设计与典型案例分享
Aug 02 PHP
PHP二进制与字符串之间的相互转换教程
Oct 14 PHP
PHP不使用递归的无限级分类简单实例
Nov 05 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
Dec 07 PHP
php连接mysql数据库
Mar 21 PHP
使用php自动备份数据库表的实现方法
Jul 28 PHP
PHP实现删除非站内外部链接实例代码
Jun 17 #PHP
php的SimpleXML方法读写XML接口文件实例解析
Jun 16 #PHP
Thinkphp中Create方法深入探究
Jun 16 #PHP
ThinkPHP中的关联模型注意点
Jun 16 #PHP
用PHP代替JS玩转DOM的思路及示例代码
Jun 15 #PHP
php判断数组元素中是否存在某个字符串的方法
Jun 14 #PHP
浅析PHP的静态成员函数效率更高的原因
Jun 13 #PHP
You might like
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
图片加载完成再执行事件的实例
2017/11/16 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
详解Python3中的Sequence type的使用
2015/08/01 Python
python实现简单爬虫功能的示例
2016/10/24 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
求职自荐信怎么写
2014/03/06 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
2015年度物流工作总结
2015/04/30 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android