本来想用插件上传图片的，后来自己写了一个简单的js实现异步的图片上传，不多说上代码很easy

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>

js php xmlrequest 上传图片的更多相关文章

  1. ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10

    /* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...

  2. js无刷新上传图片，服务端有生成缩略图，剪切图片，iphone图片旋转判断功能

    html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" me ...

  3. Asp.Net MVC 中JS通过ajaxfileupload上传图片获取身份证姓名、生日、家庭住址等详细信息

    客户要求用身份证图片上传获取身份证的详细信息就下来研究了一下(现在的客户真的懒 身份证信息都懒得输入了哈哈...),经过慢慢研究,果然皇天不负有心人搞出来了.这个借助的是腾讯的一个SKD  腾讯优图云 ...

  4. JS 从剪贴板上传图片

    用Ubuntu两年多了,习惯了Ubuntu的操作感觉比WIN用起来还爽,就一点不爽,生态应用很少,好多WIN上好用的软件在Ubuntu找不到的,希望以后的软件可以做到一次编译全平台通用. 即使用上Wi ...

  5. js前台检测上传图片大小的总结

    最近一直在做上传图片的前端检测,不通过后台就完成这个动作.但实际是,实际效果差强人意. html5的fileApi出来后,对文件的处理才变得方便了些,对它的简单介绍可以看我的前面的博客.现在支持的浏览 ...

  6. js预览上传图片

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. js拖拽上传图片

    有时候,在开发中,需要遇到拖拽上传图片的需求,即从磁盘选中一张或多张图片,然后按着鼠标把图片拖动到页面上指定的区域,实现图片的上传. 1.后端上传图片的接口 我是之前用vue写一个简单的后台系统的时候 ...

  8. 原生js复制粘贴上传图片前后台代码，兼容firebox，chrome， ie11，亲测有效

    需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...

  9. js 预处理用户上传图片

    前几个月闲得无聊写得一段代码,没想最近刚好用上了,在硬盘里翻了半天找回来,还没好好整理直接用上了手机用户拍照上传的图片一般都在1M 到4M 之间,如果只是用作头像尺寸就可以缩小很多,1M甚至几M的图转 ...

随机推荐

  1. Java如何实现对Mysql数据库的行锁

    场景如下:     用户账户有余额,当发生交易时,需要实时更新余额.这里如果发生并发问题,那么会造成用户余额和实际交易的不一致,这对公司和客户来说都是很危险的. 那么如何避免:     网上查了下,有 ...

  2. 在mac系统安装Apache Tomcat的详细步骤（转载自himi的博客，修改了错误添加了图片）

    链接地址:http://blog.csdn.net/liuyuyefz/article/details/8072485 1. 2. 3. 4. 5. 对于Apache Tomcat 估计很多童鞋都会, ...

  3. 我用过的linux命令--安装JDK

    首先,我的测试环境是CentOS的linux虚拟机,如果想安装JDK,首先要有一个JDK.利用的软件就是WinSCP,把JDK从windows中传送到Linux中去. 1. JDK从Windows到L ...

  4. Tomcat 启动 Debug模式

    如果debug启动遇到如下错误: ERROR: transport error 202: gethostbyname: unknown host ERROR: JDWP Transport dt_so ...

  5. iphone手机上的click和touch

    在iphone手机上绑定click事件时,当你触发点击事件时,你绑定的click事件的DOM节点,会自动被一块浮层选中.所以如果使用事件委托来做事件绑定会造成很差的用户体验. 使用touchstart ...

  6. html加载与脚本运行中，由于html未完全加载而导致脚本找不到dom元素无法执行事件

    问题: 如题,就是说alert后出现一个对话框,我没有点关闭,其他js文件或html会被加载吗,我遇到一个问题就是在页面加载时调用一个div的click事件,却没有被执行,但是在调用事件前面加上ale ...

  7. 向ibus-table-wubi里添加属于自己的输入法（98五笔）

    写在前面: 第三步整理每行的结构相对来说算是最难的,我的方法是先用文本编码转换专家将文本编码转换成utf-8无BOM(linux下有转换命令不会用,一定要是无BOM否则会在linux下打开乱码),再用 ...

  8. delphi 编译生成ipa文件

    找IPA文件 开发模式ipa文件和发布模式ipa文件,路径不同. http://www.itnose.net/detail/6101808.html 一.开发模式Development 不需要真机,可 ...

  9. DLL与EXE之间的通讯调用 以及 回调函数的线程执行空间

    dll 与 exe 之间的通讯方式有很多种, 本文采用回调函数的方法实现, 本文也将研究多线程,多模块的情况下,回调函数所在的线程, 啥也不说了,先附上代码: 下面的是dll模块的的, dll的工程文 ...

  10. JavaEE Tutorials (11) - 使用Criteria API创建查询

    11.1Criteria和Metamodel API概述16811.2使用Metamodel API为实体类建模170 11.2.1使用元模型类17011.3使用Criteria API和Metamo ...