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


Posted in PHP onJune 02, 2014

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>
PHP 相关文章推荐
PHP自动更新新闻DIY
Oct 09 PHP
php中用文本文件做数据库的实现方法
Mar 27 PHP
php中经典方法实现判断多维数组是否为空
Oct 23 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
Feb 14 PHP
如何使用php绘制在图片上的正余弦曲线
Jun 08 PHP
一个不易被发现的PHP后门代码解析
Jul 05 PHP
PHP常用编译参数中文说明
Sep 27 PHP
PHP实现HTML生成PDF文件的方法
Nov 07 PHP
ThinkPHP使用Smarty第三方插件方法小结
Mar 19 PHP
PHP图像识别技术原理与实现
Oct 27 PHP
php注册审核重点解析(数据访问)
May 23 PHP
php提高脚本性能的4个技巧
Aug 18 PHP
php实例分享之html转为rtf格式
Jun 02 #PHP
php 伪静态之IIS篇
Jun 02 #PHP
php伪静态之APACHE篇
Jun 02 #PHP
50个PHP程序性能优化的方法
Jun 02 #PHP
浅谈php扩展imagick
Jun 02 #PHP
PHP小技巧之函数重载
Jun 02 #PHP
mac下Apache + MySql + PHP搭建网站开发环境
Jun 02 #PHP
You might like
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
Javascript简单实现可拖动的div
2013/10/22 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
javascript实现拖放效果
2015/12/16 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
对Python w和w+权限的区别详解
2019/01/23 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
工程安全生产协议书
2014/11/21 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
任长霞观后感
2015/06/16 职场文书
工程款催款函
2015/06/24 职场文书
庆七一主持词
2015/06/29 职场文书