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输出控制功能在简繁体转换中的应用
Oct 09 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
Aug 02 PHP
php unset全局变量运用问题的深入解析
Jun 17 PHP
PHP错误提示的关闭方法详解
Jun 23 PHP
php使用Session和文件统计在线人数
Jul 04 PHP
yii2带搜索功能的下拉框实例详解
May 12 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
Jun 05 PHP
利用PHP判断文件是否为图片的方法总结
Jan 06 PHP
PHP基于自增数据如何生成不重复的随机数示例
May 19 PHP
PHP封装的XML简单操作类完整实例
Nov 13 PHP
PHP长连接实现与使用方法详解
Feb 11 PHP
php 截取中英文混合字符串的方法
May 31 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
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
浅析php工厂模式
2014/11/25 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
不安全的常用的js写法
2009/09/15 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
在python中画正态分布图像的实例
2019/07/08 Python
python实现数据分析与建模
2019/07/11 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
非常详细的C#面试题集
2016/07/13 面试题
大学新生欢迎词
2014/01/10 职场文书
高中军训广播稿
2014/01/14 职场文书
干部培训自我鉴定
2014/01/22 职场文书
火车的故事教学反思
2014/02/11 职场文书
跑操口号
2014/06/12 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书