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 相关文章推荐
海河写的 Discuz论坛帖子调用js的php代码
Aug 23 PHP
php 什么是PEAR?
Mar 19 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
Jun 13 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
May 08 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
Mar 03 PHP
php根据某字段对多维数组进行排序的方法
Mar 07 PHP
Laravel 5框架学习之用户认证
Apr 09 PHP
详解PHP数组赋值方法
Nov 07 PHP
PHP获取二维数组中某一列的值集合
Dec 25 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
Feb 17 PHP
Yii实现复选框批量操作实例代码
Mar 15 PHP
Yii redis集合的基本使用教程
Jun 14 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读取msn上的用户信息类
2008/12/05 PHP
php cookis创建实现代码
2009/03/16 PHP
php生成随机密码的几种方法
2011/01/17 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
浅析python内置模块collections
2019/11/15 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
django rest framework serializers序列化实例
2020/05/13 Python
Python实现播放和录制声音的功能
2020/08/12 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
高中生期末评语大全
2014/01/28 职场文书
太太口服液广告词
2014/03/20 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python