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. DataSet和泛型之间相互转换
			
    取数据的时候,存储过程返回了多个结果集,后台用DataSet去接收这几个结果集,然后接收之后,需要将结果集转换为不同的实体,于是下面的代码便出现了. /// <summary> /// 将 ...
    
			
    2. 
						
  2. 浅谈ETL架构中ODS的作用以及如何在HaoheDI中自动创建ODS表
			
    什么是ODS表? 在ETL架构中,源数据很少会直接抽取加载到数据仓库EDW,二者之间往往会设置一个源数据的临时存储区域,存储数据在清洗转换前的原始形态,通常被大家称做操作型数据存储,简称ODS,在Ki ...
    
			
    3. 
						
  3. 大数据&人工智能&云计算
			
    仅从技术上讲大数据.人工智能都包含工程.算法两方面内容: 一.大数据: 工程: 1)云计算,核心是怎么管理大量的计算机.存储.网络. 2)核心是如何管理数据:代表是分布式存储,HDFS 3)核心是如何 ...
    
			
    4. 
						
  4. Spark_安装配置_运行模式
			
    一.Spark支持的安装模式: 1.伪分布式(一台机器即可) 2.全分布式(至少需要3台机器) 二.Spark的安装配置 1.准备工作 安装Linux和JDK1.8 配置Linux:关闭防火墙.主机名 ...
    
			
    5. 
						
  5. 采用文件方式安装Python第三方库
			
    由于Python某些第三方库仅提供源代码,通过pip下载文件后无法在Windows系统编译安装,会导致第三方库安装失败.为了解决这类第三方库的安装问题,美国加州大学尔湾分校提供了一个网页,帮助Pyth ...
    
			
    6. 
						
  6. Linux字符设备驱动--No.2
			
    分析中断注册函数:request_irq int butsOpen(struct inode *p, struct file *f) { int irq; int i; ; printk(KERN_E ...
    
			
    7. 
						
  7. win10 禁用自动更新
			
    管理员身份运行CMD,输入REG add "HKLM\SYSTEM\CurrentControlSet\Services\UsoSvc" /v "Start"  ...
    
			
    8. 
						
  8. PWA-缓存
			
    PWA-缓存 基础 PWA强大的离线能力就在于Service Worker拦截请求及提供缓存的能力,Service Worker的缓存能力比较强大,它能够赋予你更加精确控制缓存的能力.示例页面 < ...
    
			
    9. 
						
  9. Shell--cut用法
			
    cut是以每一行为一个处理对象的,这种机制和sed一样. cut接受三个定位方法: 1)byte: -b 2)characters: -c 3)fields: -d eg:提取第3,4,5,9的字节: ...
    
			
    10. 
						
  10. Python 入门（一）
			
    IDE 个人推荐  Pycharm : 比较好用,虽然没有中文,但是练练英语也不错,毕竟大同小异 基础语法 行与缩进 python最具特色的就是使用缩进来表示代码块,不需要使用大括号 {} . 缩进的 ...
    
			
    11.