php+js实现上传图片

首先，码接上文JS实现调用手机相机功能

<td align="right" colspan="2">质检报告</td>
<input type="file" <?php echo "id=\"".$check_report_image."\"" ?> name="cover" accept="image/*" capture="camera" />

<td align="center">
 <a style="text-decoration:none" href="javascript:sendmsg('<?php echo $data['po_number'][$x];?>','<?php echo $data['line_number'][$x];?>','<?php echo $i;?>');"><input  id="btn" type="button" value="确认" />
 </a>
</td>

使用input框调用手机相机功能或pc端上传图片功能（因直接截取的项目代码，未严格将无关代码剔除，请忽略部分变量、参数等代码，后面内容同此）

但如何将图片数据传输到后台php代码进行处理呢？这就需要用到js了：

function sendmsg(poheader,poline,id){
  //获取质检报告图片
  var doc_name = "check_report_image" + id;
  var check_report_image = document.getElementById(doc_name).files[0];
  console.log(check_report_image);
  if(typeof(check_report_image) == "undefined" || check_report_image.size <= 0) {
    alert("质检报告缺失，请拍照或选择照片");
    return;
  }
 var defaults = {
    json_url: '/extensions/check/json_check.php',
    report_type: 'block',
    update_data: true
  };
  var settings = $.extend({}, defaults, printData);

  var formData = new FormData();     //创建formData对象，重点、重点、重点
  formData.append("poheader", poheader);    //向formData对象中添加数据（键值对形式）
  formData.append("poline", poline);
  formData.append("status", status);
  formData.append("qualified_quantity", qualified_quantity);
  formData.append('check_report_image', check_report_image);    //添加图片数据

  return $.ajax({
    url: settings.json_url,
    type: 'post',
    data: formData,
    // dataType: "json",    //重点、重点、重点
    cache: false,//不缓存
    processData: false,//告诉jQuery不要去处理发送的数据
    contentType: false, //告诉jQuery不要去设置content-type请求头
    success: function (result) {
      if (result) {
        console.log(result);
        var obj =  eval('(' + result + ')');      //重点、重点、重点
        if(obj.status == 1) {
          console.log(obj.wait_quantity);
          alert("检验合格数量：" + qualified_quantity + "；不合格数量：" +       obj.wait_quantity);
        }
      window.location.reload();
    },
    error: function (request, errorType, errorMessage) {
    }
  });
  window.location.reload();
}

要着重注意一下几点：

1、图片的传输有两种思路，改选择哪种思路：

（1）可以将图片转化为base64数据，然后通过ajax post请求把这个数据传输给后台进行处理，但不推荐，理由百度上很多就不陈述了。

（2）使用formData对象进行传输，这种方法比较方便，推荐。

2、H5 formData对象如何理解？有什么作用？

MDN上介绍说：XMLHttpRequest Level 2 添加了一个新的接口FormData，利用FormData对象，我们可以通过javascript用一些键值对来模拟一系列表单控件，我们还可以使用XMLHttpRequest的send()方法来异步的提交这个“表单”。其实这介绍太抽象，我也不太理解，你只需要知道比起普通的ajax，使用formData的最大优点是我们可以异步上传一个二进制文件。

3、使用jQuery上传有两个配置需要特别注意：

processData会默认将data转化为字符串，所以需要配置为false，告诉jQuery不要去处理发送的数据。

contentType默认值为application/x-www-form-urlencoded;charset=UTF-8。上传文件是，contentType应该为multipart/form-data。但是设置为multipart/form-data也还会失败，因为只有设置为false才可以，告诉jQuery不要去设置contentType请求头。

4、接下来碰到一个很能体现我基础不扎实的问题，通过ajax，数据成功传到服务端php处理完之后向success返回data数据，此时我习惯性的使用eval()函数解析data数据，结果报错。一开始以为是数据没有按照规定的json格式{ "键" : "值" , "键" : "值" }或存在错误字符，但细心检查不是此类错误。

然后排查错误，发现dataType设置的是“json“格式，这种设置下，jQuery在返回时已经把返回值转换成了json对象，就不需要eval转换了，所以在eval()解析就多此一举了。如果dataType设置的是“text”格式的话，才需要用eval解析。然后将dataType："json"注释掉，发现就没有错误了。

 

js端代码大概就是这些，下面是后端php代码比较简单：

//质检报告图片
    if($_FILES["check_report_image"]["error"] > 0 ) {
    	echo json_encode(['error' => $_FILES["check_report_image"]["error"]], true);
    }else {
        //以符号“.”截取图片
    	$exp_array = explode(".", $_FILES["check_report_image"]["name"]);
        //给图片起好名字
    	$new_image_name = $po_header->po_header_id. "-" . $_POST['poline'] . "-" . date("Ymd-His") . "." . end($exp_array);
        //将上传的图片移动到指定路径下
    	$up_res = move_uploaded_file($_FILES["check_report_image"]["tmp_name"], "check_report_image/".$new_image_name);
    }

在php脚本中，上传文件需要处理的数据保存在超级全局数组$_FILES中。

存储在$_FILES[‘userfile’][‘error’]变量中的值将是任何与文件上传相关的错误代码。这是在PHP 4.2.0中增加的新特性。以此来监控上传是否出错。

上传没问题的话就通过move_uploaded_file（文件， 位置）函数将上传文件保存在指定位置，然后再将此位置存储在指定表中，何时使用图片何时据此调用即可。