js+php如何实现上传图片

近期有一些朋友，在作上传图片这一块的时候进度卡住了。有个朋友说，我已经在这个问题上浪费了一天了。
确实，对于新手而言，上传图片成了比较复杂的的一个事，今天整理了一下经常使用的两种方式，让新手轻松掌握上传图片的小难题。

（一）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);  
      }  
   });  
}

后端代码：
如方法一，不变。

无刷新的上传图片功能，也轻松的搞定了！

总结

通常根据业务选择对应的方式来实现，文章里面主要是告诉你们如何实现，一些细节处理，仍是须要你们本身去处理。
若有疑问或者建议，均可以联系我。

原文地址：https://www.jianshu.com/p/b7f5a706d7da