近期有一些朋友，在做上传图片这一块的时候进度卡住了。有个朋友说，我已经在这个问题上浪费了一天了。
确实，对于新手而言，上传图片成了比较复杂的的一个事，今天整理了一下常用的两种方式，让新手轻松掌握上传图片的小难题。
（一）form表单上传
这种方式简单暴力，如果没有特殊需求，数据和图片一次性处理的时候，这种方式，最合适不过。
<b>前端的代码:</b>
<form action="upload" method="post" enctype="multipart/form-data">
<input type="file" name="pic" />
<input type="submit" value="上传" />
</form>
- action 请求的后端方法
- enctype="multipart/form-data" 在使用包含文件上传控件的表单时，必须使用该值。
<b>后端的代码:</b>
public function upload(){
// 获取上传的图片
$pic = $_FILES['pic']['tmp_name'];
$upload_ret = false;
if($pic){
// 上传的路径，建议写物理路径
$uploadDir = 'static/upload';
// 创建文件夹
if(!file_exists($uploadDir)){
mkdir($uploadDir, 0777);
}
// 用时间戳来保存图片，防止重复
$targetFile = $uploadDir . '/' . time() . $_FILES['pic']['name'];
// 将临时文件 移动到我们指定的路径，返回上传结果
$upload_ret = move_uploaded_file($pic, $targetFile) ? true : false;
}
return $upload_ret;
}
简单的一个form表单上传文件就搞定了！
（二）ajax 无刷新上传图片
传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用ajax的方式进行请求的。
很多人肯定会想到JQuery的ajax操作，但是这样的做法是没用的，因为只能传递一般的参数，文件是无法上传的。
这个时候 有一个叫做FormData的东西的出现拯救了我们
关于FormData
XMLHttpRequest Level 2添加了一个新的接口FormData，利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件，我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单"。比起普通的ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件。
所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
参见：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
-
原生的XMLHttpRequest 实现
前端的代码:
<form>
<input type="file" name="pic" id="pic"/>
<input type="button" onClick="upload()" value="上传" />
</form>
js的代码:
function upload(){
// 请求的后端方法
var url="upload";
// 获取文件
var pic = document.getElementById('pic').files[0];
// 初始化一个 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 初始化一个 FormData 对象
var form = new FormData();
// 携带文件
form.append("pic", pic);
//开始上传
xhr.open("POST", url, true);
//在readystatechange事件上绑定一个事件处理函数
xhr.onreadystatechange=callback;
xhr.send(form);
function callback() {
if(xhr.readyState == 4){
if(xhr.status == 200){
if(xhr.responseText == 1){
alert('添加成功');
window.location.reload();
}else{
alert("添加失败");
}
}
}
}
}
参见:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
后端代码：
如方法一，不变。
-
JQuery + FormData 实现
其实JQuery也是可以操作的，不过老版本不支持，所以建议使用2.0及更新版本。
前端代码:
<form id= "upload_form">
指定文件名：<input type="text" name="filename" />
上传文件：<input type="file" name="file"/>
<input type="button" value="上传" onclick="upload()" />
</form>
js代码：
function upload(){
var form = new FormData($("#upload_form")[0]);
$.ajax({
url:'upload',
type:'POST',
data:form,
success:function (result){
alert(result);
},
error:function (result){
alert(result);
}
});
}
后端代码：
如方法一，不变。
无刷新的上传图片功能，也轻松的搞定了！
总结
一般根据业务选择对应的方式来实现，文章里面主要是告诉大家如何实现，一些细节处理，还是需要大家自己去处理。
如有疑问或者建议，都可以联系我。