html+js 代码

 <!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

 if(isset($_FILES["myfile"]))

 {

 $ret = array();  //用来保存图片上传之后的路径，文件名

 $uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;  // DIRECTORY_SEPARATOR常量，解析后为"/"为了兼容不同系统之间路径写法的区别


 $dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir; //路径名,可以自己修改  
 7 file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777)); 
 if(!is_array($_FILES["myfile"]["name"])) //single file  
 9 {
  $fileName = time().uniqid().'.'.pathinfo($_FILES["myfile"]["name"])['extension']; 
 move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName); //移动到指定$dir 目录下，该目录不存在会自动创建，重命名上传的文件
  $ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
  }
  echo json_encode($ret); 
 }
  ?>


												


											
php+原生ajax实现图片文件上传功能实例的更多相关文章
	

    
								
  1. springMVC图片文件上传功能的实现
		
    在工程依赖库下添加文件上传jar包 commons-fileupload-1.2.2.jar commons-io-2.4.jar 2.jsp页面设置form表单属性enctype 在表单中上传图片时 ...
    
		
    2. 
						
  2. HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传
		
    这是在上篇 HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条 的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的 JavaScript 代码,所以我 ...
    
		
    3. 
						
  3. java模拟表单上传文件，java通过模拟post方式提交表单实现图片上传功能实例
		
    java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...
    
		
    4. 
						
  4. iOS  的 Safari 文件上传功能详解
		
    iOS 6 给 Safari 浏览器带来的另外一个功能是文件上传,终于 Safari 终于支持 input 输入框的文件类型了,并且还支持 HTML媒体捕获(HTML Media Capture).  ...
    
		
    5. 
						
  5. .Net Core 图片文件上传下载
		
    当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
    
		
    6. 
						
  6. 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
		
    Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...
    
		
    7. 
						
  7. 文件/大文件上传功能实现（JS+PHP）全过程
		
    文件/大文件上传功能实现(JS+PHP) 参考博文:掘金-橙红年代 前端大文件上传 路漫漫 其修远 PHP + JS 实现大文件分割上传 本文是学习文件上传后的学习总结文章,从无到有实现文件上传功能, ...
    
		
    8. 
						
  8. 使用element的upload组件实现一个完整的文件上传功能（下）
		
    本篇文章是<使用element的upload组件实现一个完整的文件上传功能(上)>的续篇. 话不多说,接着上一篇直接开始 一.功能完善—保存表格中每一列的文件列表状态 1.思路 保存表格中 ...
    
		
    9. 
						
  9. Vue实现多文件上传功能(前端 + 后端代码)
		
    本人业余前端开发,因为公司(很坑)觉得我很牛逼,所以让我前后端一起玩,无奈的我只能磕磕碰碰的研究起了vue. 开发项目的时候,用到文件上传的功能很常见,包括单文件上传和多文件上传,上传各种类型的文件. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. mvc 页面 去掉转义字符
			
    mvc 页面 去掉转义字符   mvc 后台返回json数据,用ViewBag 传回前台页面,但是传到前台页面的时候,带有转义字符.一直想去掉这个转义字符,苦恼了好久. 解决方案: mvc 页面有个这 ...
    
			
    2. 
						
  2. Spring异常重试框架Spring Retry
			
    Spring Retry支持集成到Spring或者Spring Boot项目中,而它支持AOP的切面注入写法,所以在引入时必须引入aspectjweaver.jar包. 快速集成的代码样例: @Con ...
    
			
    3. 
						
  3. linux系统快速安装宝塔
			
    宝塔面板分linux面板和windows面板,安装宝塔linux面板首先要访问宝塔官网查看对应版本进行选择 宝塔面板的安装需要注意的地方有: 1.纯净系统 2.确保是干净的操作系统,没有安装过其它环境 ...
    
			
    4. 
						
  4. Leecode刷题之旅-C语言/python-344反转字符串
			
    /* * @lc app=leetcode.cn id=344 lang=c * * [344] 反转字符串 * * https://leetcode-cn.com/problems/reverse- ...
    
			
    5. 
						
  5. 谁能笑到最后，约瑟夫环-Josephus问题求解
			
     一. 简述Josephus问题 N个人站成一环,从1号开始,用刀将环中后面一个人“消灭“”掉,之后再将刀递给下一个人,这样依次处理,最后留下一个幸存者. 二. 求解方法  1.  约瑟夫问题如果使用 ...
    
			
    6. 
						
  6. linux 搭建ss
			
    因为收藏的各种教程被xx,所以决定自己写 第一步.安装ss sudo pip install shadowsocks 第二步.配置IP.端口.密码.加密方式 vi /etc/shadowsocks.j ...
    
			
    7. 
						
  7. 函数调用方法之__cdecl与_stdcall
			
    在debug VS c工程文件时,碰到cannot convert from 'int (__cdecl *)(char *)' to 'xxx'这个问题,发现问题在于typedef函数指针类型时,将 ...
    
			
    8. 
						
  8. VR中为什么需要把游戏音频放在聚光灯里？
			
    VR中为什么需要把游戏音频放在聚光灯里? 本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/de ...
    
			
    9. 
						
  9. 全新Ubuntu-13.04安装配置redmine
			
    1. apt-get install  vim  apache2 libapache2-mod-passenger ruby rubygems libruby ruby-dev  libmagickc ...
    
			
    10. 
						
  10. 限时购校验小工具&dubbo异步调用实现限
			
    本文来自网易云社区 作者:张伟 背景 限时购是网易考拉目前比较常用的促销形式,但是前期创建一个限时购活动时需要各个BU按照指定的Excel格式进行选品提报,为了保证提报数据准确,运营需要人肉校验很多信 ...
    
			
    11.