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. 获取地图的信息到input里
			
    在最近项目中,我接触了百度地图的API写法,对其中的代码有了一点兴趣,所以我在完成任务后,在办公室里学习了百度地图的相关引用,并申请了服务秘钥: E7PCho0sv3FdzmjC901ttP0HrS9 ...
    
			
    2. 
						
  2. 前端String转json
			
    1.data = eval("("+data+")");2.JSON.parse(data);
    
			
    3. 
						
  3. ASP.NET Core获取微信订单数据
			
    前几天对接了一波微信的订单,分享出来 1.生成签名 根据微信要求把appid.商户号.随机数.和订单号还有商户平台的密钥拼接成一个字符串然后进行MD5加密 2.拼接请求XML 然后用拼接好的XML向微 ...
    
			
    4. 
						
  4. Java中常见的比较
			
    一.StringBuffer.StringBuilder.String 1) 都是 final 类, 都不允许被继承; 2) String 长度是不可变的, StringBuffer.StringBu ...
    
			
    5. 
						
  5. Java核心技术36讲----------谈谈final、finally、finalize有什么不同
			
    一.final 1.final修饰方法时,需要注意的点: #final修饰方法时,之前的第二个原因是效率.但是如果方法过于庞大,可能看不到内嵌调用带来的任何性能提升.在最近的Java版本中,不需要使用 ...
    
			
    6. 
						
  6. Struts2+EasyUI+Hibernate小实例
			
    概述 这个实例主要是前台数据到后台数据的传递和后台数据到前台数据的传递,完成数据的新增,以及对新增数据的展示.下面是详细的过程: Hibernate(数据库部分) 这里只是数据库的连接和数据库实体与物 ...
    
			
    7. 
						
  7. hadoop学习笔记——zookeeper平台搭建
			
    zookeeper是一个自动管理分布式集群的一个工具,以实现集群的高可用. 比如集群中的一个机器挂掉了,没有zookeeper的话就得考虑挂一个机器对剩下集群工作的影响,而有了zookeeper,它就 ...
    
			
    8. 
						
  8. 基于OMAPL138的字符驱动_GPIO驱动AD9833(三)之中断申请IRQ
			
    基于OMAPL138的字符驱动_GPIO驱动AD9833(三)之中断申请IRQ 0. 导语 学习进入到了下一个阶段,还是以AD9833为例,这次学习是向设备申请中断,实现触发,在未来很多场景,比如做用 ...
    
			
    9. 
						
  9. Leecode刷题之旅-C语言/python-206反转链表
			
    /* * @lc app=leetcode.cn id=206 lang=c * * [206] 反转链表 * * https://leetcode-cn.com/problems/reverse-l ...
    
			
    10. 
						
  10. C Mingw gcc printf 刷新缓冲行
			
    C Mingw gcc printf 刷新缓冲行 参考:https://stackoverflow.com/questions/13035075/printf-not-printing-on-cons ...
    
			
    11.