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. rz/sz:工作原理
			
    我们知道用linux命令rz/sz可以通过一些终端软件如secureCRT等在linux服务器与本地windows之间传文件.在服务器上rz一下,在本地windows下就跳出一个窗口,选择文件后就传到 ...
    
			
    2. 
						
  2. 【读书笔记 - Effective Java】02. 遇到多个构造器参数时要考虑用构建器
			
    类有多个可选参数的解决方案: 1. 重叠构造器模式可行,但是当有许多参数的时候,客户端代码会很难编写,并且仍然较难以阅读. 2. JavaBeans模式,调用一个无参构造器来创造对象,然后调用sett ...
    
			
    3. 
						
  3. 登录验证码的生成Java代码
			
    package example7; import java.awt.Color;import java.awt.Font;import java.awt.Graphics2D;import java. ...
    
			
    4. 
						
  4. Python入门 —— 02基础语法
			
    基础语法入门学习推荐: 简明 Python 教程 下文仅为入门推荐书籍的补充与重点 多行语句:末尾使用斜杠 (  ) ,将一行分为多行 var = item1 + item2 + item3 注释:  ...
    
			
    5. 
						
  5. Python文本和字符串常用操作
			
    ## 字符串分割 line = "This is my love!" fields = line.split(' ') print(fields) # ['This', 'is', ...
    
			
    6. 
						
  6. yii学习笔记（6），数据库操作（增删改）
			
    数据库增删改操作通过活动记录实例来完成 插入记录 /* ----------添加记录---------- */ // 创建活动记录对象 $article = new Article(); $artic ...
    
			
    7. 
						
  7. centos7安装mysql5.7.18笔记
			
    重装了一下系统,装了centos7,但是centos7下默认没有安装mysql,有MariaDB数据库,网上的解释是: “MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用 ...
    
			
    8. 
						
  8. django基本配置项-5
			
    目录 BASE_DIR 项目路径 DEBUG 模式 ROOT_URLCONF DATABASES 数据库设置 国际化 静态文件 访问静态文件示例 ALLOWED_HOSTS TEMPLATES 模板设 ...
    
			
    9. 
						
  9. apache上.htaccess转向nginx上配置.htaccess伪静态规则
			
    nginx上配置.htaccess伪静态规则 在apache上.htaccess转向,只要apache编译的时候指明支持rewrite模块即可. 但是换到nginx上方法会有不同,有人说把.htacc ...
    
			
    10. 
						
  10. Go搭建一个博客系统
			
    go语言环境就不用多说了,版本肯定越高越好,这里用go1.10 先放着
    
			
    11.