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 相关文章推荐
一个目录遍历函数
Oct 09 PHP
Discuz板块横排显示图片的实现方法
May 28 PHP
php设计模式 Observer(观察者模式)
Jun 26 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
Oct 03 PHP
IIS安装Apache伪静态插件的具体操作图文
Jul 01 PHP
php配合jquery实现增删操作具体实例
Dec 12 PHP
php中memcache 基本操作实例
May 17 PHP
php使用gzip压缩传输js和css文件的方法
Jul 29 PHP
非常全面的php日期时间运算汇总
Nov 04 PHP
搜索附近的人PHP实现代码
Feb 11 PHP
php设计模式之适配器模式原理、用法及注意事项详解
Sep 24 PHP
PHP中isset、empty的用法与区别示例详解
Nov 05 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
php fread读取文件注意事项
2016/09/24 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
javascript add event remove event
2008/04/07 Javascript
jQuery示例收集
2010/11/05 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
set在python里的含义和用法
2019/06/24 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
基于Python实现天天酷跑功能
2021/01/06 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
求职简历自荐信
2014/06/18 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
详解Oracle块修改跟踪功能
2021/11/07 Oracle
Spring Boot 实现 WebSocket
2022/04/30 Java/Android