html5 ci图片上传,HTML Formdata 文件上传

本篇教程探讨了HTML5 Formdata完成图片上传，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。它有一些有趣的特性，比如 Formdata 。 Formdata是XMLHttpRequest 的一个对象利用它我们可以实现提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。

· 首先看一下formData的基本用法：FormData对象

FormData对象可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：

var form = document.getElementById("form1");var fd = new FormData(form);

· 下面是HTML结构

当前头像

提交

*下面是点击事件触发的函数

gogogo:function(){

var form=document.getElementById("form1");

var fd =new FormData(form);//新建FormData对象，并把form表单的数据作为参数

$.ajax({

url: "http://127.0.0.1/bishegogogo/CI/img/test", //注意此处我使用了PHP CI框架 。项目名bishegogogo，img为CI框架下的控制器，test为控制器下的方法

type: "POST", //提交方式 我使用 post提交

data: fd, //传输数据

processData: false,  // 告诉jQuery不要去处理发送的数据

contentType: false,   // 告诉jQuery不要去设置Content-Type请求头

success: function(response,status,xhr);

var json=$.parseJSON(response);

var imgsrc = 'http://127.0.0.1/img/TX/' + json['photo'];//这里请注意引用

$("img").attr("src",imgsrc);//jquery更新 imgsrc

}

});

return false;

}

至此完成了 1.上传图片 2.保存在本地服务器 3.显示

· php代码

public function test(){  //function test() 即 控制器下的方法

$localurl = '../../img/TX/';//第二个智商欠费

$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));//为图片重命名

$imgurl = $localurl.$filename;//php拼接字符串始用 ‘ . ’ 等同于JS的  ‘ + ’

$response = array();

if(move_uploaded_file($_FILES['photo']['tmp_name'], $imgurl)){//move_uploaded_file函数

$response['isSuccess'] = true;

$response['photo'] = $filename;

}else{

$response['isSuccess'] = false;

}

echo json_encode($response);

}

}?>

move_uploaded_file函数

有两个参数第一个参数需要指定将要移动的图片，第二个参数给定目标目录

也就是说从文件的临时存放目录，存到真正需要存储的目录