php+js实现上传图片

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

质检报告
name="cover" accept="image/*" capture="camera" />&＃39;,&＃39;&＃39;,&＃39;&＃39;);">



使用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: &＃39;/extensions/check/json_check.php&＃39;,report_type: &＃39;block&＃39;,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(&＃39;check_report_image&＃39;, check_report_image); //添加图片数据return $.ajax({url: settings.json_url,type: &＃39;post&＃39;,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(&＃39;(&＃39; + result + &＃39;)&＃39;); //重点、重点、重点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([&＃39;error&＃39; => $_FILES["check_report_image"]["error"]], true);}else {//以符号“.”截取图片$exp_array = explode(".", $_FILES["check_report_image"]["name"]);//给图片起好名字$new_image_name = $po_header->po_header_id. "-" . $_POST[&＃39;poline&＃39;] . "-" . 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（文件， 位置）函数将上传文件保存在指定位置，然后再将此位置存储在指定表中，何时使用图片何时据此调用即可。