php+js实现异步图片上传实例分享

 更新时间:2014年06月02日 14:49:19   转载 作者:  
本来想用插件上传图片的,后来自己写了一个简单的js实现异步的图片上传,不多说上代码非常简单

upload.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);
}

?>

index.html

复制代码 代码如下:

<!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>

相关文章

  • Redis使用Eval多个键值自增的操作实例

    Redis使用Eval多个键值自增的操作实例

    下面小编就为大家带来一篇Redis使用Eval 多个键值自增的操作实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • FleaPHP框架数据库查询条件($conditions)写法总结

    FleaPHP框架数据库查询条件($conditions)写法总结

    这篇文章主要介绍了FleaPHP框架数据库查询条件($conditions)写法,结合实例形式总结分析了针对$conditions参数为整数,字符串,数组等情况的使用方法及各种查询技巧,需要的朋友可以参考下
    2016-03-03
  • thinkphp控制器调度使用示例

    thinkphp控制器调度使用示例

    这篇文章主要介绍了thinkphp控制器调度使用示例,需要的朋友可以参考下
    2014-02-02
  • PHP速成大法

    PHP速成大法

    本文主要是简单而全面的向大家介绍了一下php的相关知识,php入门非常简单,稍微有点小基础的小伙伴们一天就能入门。
    2015-01-01
  • PHP生成HTML静态页面实例代码

    PHP生成HTML静态页面实例代码

    本程序作用是从PHP生成HTML静态页面并存储到以年份和月份为名称创建的目录。读取全部数据批量生成,全部生成后弹出提示。可指定批次生成数量,建议不超过800,否则执行速度会有问题。
    2008-08-08
  • Laravel框架控制器的middleware中间件用法分析

    Laravel框架控制器的middleware中间件用法分析

    这篇文章主要介绍了Laravel框架控制器的middleware中间件用法,结合具体案例形式分析了Laravel框架控制器的middleware中间件相关使用步骤、操作技巧与注意事项,需要的朋友可以参考下
    2019-09-09
  • thinkphp下MySQL数据库读写分离代码剖析

    thinkphp下MySQL数据库读写分离代码剖析

    本篇文章主要介绍了thinkphp下MySQL数据库读写分离代码剖析,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • Thinkphp中数据按分类嵌套循环实现方法

    Thinkphp中数据按分类嵌套循环实现方法

    这篇文章主要介绍了Thinkphp中数据按分类嵌套循环实现方法,适用于嵌套循环具有关联性的情况,是比较实用的技巧,需要的朋友可以参考下
    2014-10-10
  • PHP实现的微信APP支付功能示例【基于TP5框架】

    PHP实现的微信APP支付功能示例【基于TP5框架】

    这篇文章主要介绍了PHP实现的微信APP支付功能,结合实例形式分析了基于TP5框架的微信APP支付相关原理、操作步骤与处理技巧,需要的朋友可以参考下
    2019-09-09
  • php在线打包程序源码

    php在线打包程序源码

    把里面的代码保存为php格式的文件 然后丢到你的站点下面 打开……
    2008-07-07

最新评论