首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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+js实现异步图片上传实例分享

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
新安装的MySQL数据库需要注意的安全知识
Jul 30 PHP
PHP在字符串中查找指定字符串并删除的代码
Oct 02 PHP
PHP中str_replace函数使用小结
Oct 11 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
Apr 25 PHP
Zend的MVC机制使用分析(二)
May 02 PHP
mcrypt启用 加密以及解密过程详细解析
Aug 07 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
Oct 30 PHP
php给每个段落添加空格的方法
Mar 20 PHP
php使用Jpgraph绘制3D饼状图的方法
Jun 10 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
Dec 22 PHP
PHP实现带重试功能的curl连接示例
Jul 28 PHP
PHP中文字符串截断无乱码解决方法
Oct 10 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
Next.js(1) SingleFlight(2) set(1) 并发(8) Counter(1) 脚手架(2) 字典(3) frozenset(1) pip(1) most_common(1)
You might like
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
JS改变页面颜色源码分享
2018/02/24 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
Python Property属性的2种用法
2015/06/21 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python中时间模块的基本使用教程
2019/05/14 Python
Python  Django 母版和继承解析
2019/08/09 Python
Python 列表的清空方式
2020/01/13 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Python requests上传文件实现步骤
2020/09/15 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
经济实惠的名牌太阳镜和眼镜：Privé Revaux
2021/02/07 全球购物
计算机网络毕业生自荐信
2013/10/01 职场文书
大四毕业生学习总结的自我评价
2013/10/31 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
医院实习介绍信
2014/01/12 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL