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. chromium之histogram.h
			
    histogram不知道是干啥的 // Histogram is an object that aggregates statistics, and can summarize them in //  ...
    
			
    2. 
						
  2. shell脚本实现目录的“5S”作业
			
    shell,又称为命令解释器.首先它是一个软件,有很多个版本,现在最流行的为bash,它作为用户和内核沟通的中间桥梁,在系统中起着举足轻重的作用 shell脚本,是一个以.sh结尾的文件,里面是诸如l ...
    
			
    3. 
						
  3. QQ空间认证之数据篇
			
    最近,我们发现可以利用开通企鹅媒体平台的方式开通QQ公众号从而绑定我们的QQ号,这样我们所绑定的QQ号就成了认证空间了. 虽说这样很快捷的就认证了我们的QQ空间,但是,起有利也有弊.任何事情都不是十全 ...
    
			
    4. 
						
  4. xp sp3安装.Net 4.0提示严重错误，0x80070643，解决办法2017版
			
    客户电脑上要装金税开票软件,需要.net 4.0.30319.1,电脑环境是xp sp3,已经安装了.net 2, .net 3.5sp1,安装.net 4.0的时候提示错误0x80070643 因为 ...
    
			
    5. 
						
  5. 带提示范围的猜数小游戏--python
			
    import random random_number = random.randint(1, 99) print(random_number) start_data = 1 end_data = 9 ...
    
			
    6. 
						
  6. for循环练习题（1 ，判断任意一个数是91的多少倍   2，编写程序实现给定一个整数判断它从0到这个整数中间出现多少次9的次数）
			
    1 //判断任意一个数是9的多少倍 #include <stdio.h> #include <stdlib.h> int main() { printf("请输入任意 ...
    
			
    7. 
						
  7. PAT (Basic Level) Practice 1032 挖掘机技术哪家强
			
    个人练习 为了用事实说明挖掘机技术到底哪家强,PAT 组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第 1 行给出不超过 10​^5的正整数 N,即参赛人数 ...
    
			
    8. 
						
  8. Java设计模式（12）——结构型模式之门面模式（Facade）
			
    一.概述 概念 简要示意图(没有一个统一的UML图) 角色 门面角色:门面模式核心,它被客户端调用,并且熟悉子系统   子系统角色:子系统,子系统并不知道门面的存在,门面对它来说只不过是另外一个客户端 ...
    
			
    9. 
						
  9. 北京Uber优步司机奖励政策（3月10日）
			
    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
    
			
    10. 
						
  10. c/c++链表的实现
			
    #include<iostream> #include<string> #define SIZE 3 using std::cout; using std::endl; usi ...
    
			
    11.