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 相关文章推荐
PHP5中新增stdClass 内部保留类
Jun 13 PHP
php设计模式 Decorator(装饰模式)
Jun 26 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
Apr 28 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
Jun 05 PHP
php生成N个不重复的随机数实例
Nov 12 PHP
php遍历删除整个目录及文件的方法
Mar 13 PHP
深入php内核之php in array
Nov 10 PHP
分享50个提高PHP执行效率的技巧
Dec 26 PHP
PHP 搜索查询功能实现
Nov 29 PHP
Yii2实现增删改查后留在当前页的方法详解
Jan 13 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
May 05 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
Nov 21 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
数据库的日期格式转换
2006/10/09 PHP
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
Jquery中dialog属性小记
2010/09/03 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python中的自省(反射)详解
2015/06/02 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
在pycharm中显示python画的图方法
2019/08/31 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
零件设计自荐信范文
2013/11/27 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
运动会通讯稿300字
2014/02/02 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
cf搞笑广告词
2014/03/14 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
技术股份合作协议书
2014/10/05 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python