文章背景
今天要做个实名认证功能，本人做后端的，对前端玩得不太溜，不喜勿喷。
要实名就要上传身份证正反面，那就需要开发上传图片功能，网上有很多插件，有很多插件不能使用，有这样那样的问题，有的是jQuery版本高或者低了，导致插件用不了，有的是开发环境导致插件不能使用，也有可能是其它问题。
我是第二种。本来不打算用插件的，准备采用原生同步提交，但是后来觉得，体验不舒服，故修改代码，改成插件方式。
找插件，找了几个插件，英语很一般，外国插件就不考虑了。找了几个能看懂的，但是有的比较麻烦，或者风格不喜欢，几番尝试之后又继续换插件。
不知道各位在哪里找插件，楼主在码云上面找了，没找合适，github上面有，但没有中意的，然后在百度中找到一个插件“ajaxfileupload.js”，几番测试之后发现用不了，最后各种调试之后，发现是后台框架js之冲突了（本功能集成在后台系统中）。
然后再对此插件进行多轮测试，然后对后台交互接口进行改造，最后，成功。
此插件有个要注意的地方，对于新手来说不友好，因为后台接口返回的数据格式有问题之后，此插件直接报错，而且错误提示非常不友好，我是在调试模式中，doc模块下看到后台的错误信息（不一定是系统异常，只要是格式不对就不行）。
功能效果
前端HTML代码
<div class="pos m-before-img">
<!-- 隐藏域，默认是隐藏的，当用户点击上传身份证人像元素时触发事件，模拟用户点击上传元素(此input元素) -->
<input type="file" style="display: none;" name="person_image" id="person_image">
<a href="JavaScript:;" onclick="Cert.__uploadPerson(this,'person_image')">
<!-- 这个是用来显示默认图片的，相当于占位置用 -->
<img src="__CDN__/admin/agent/cert/person_image.png" alt="">
<!-- 回显图片，上传完了之后把图片显示出来，这里src属性的默认值也是用来占位置的，并且默认是隐藏的 -->
<img src="__CDN__/admin/agent/cert/idcard_img_person_image.jpg" alt="" class="return_person_image hide">
</a>
</div>
<!-- 下方代码就不赘述了，看上方代码说明 -->
<div class="pos m-before-img">
<input type="file" style="display: none;" name="emblem_image" id="emblem_image">
<a href="JavaScript:;" onclick="Cert.__uploadEmblem(this,'emblem_image')">
<img src="__CDN__/admin/agent/cert/emblem_image.png" alt="">
<!-- 回显图片 -->
<img src="__CDN__/admin/agent/cert/idcard_img_emblem_image.jpg" alt="" class="return_emblem_image hide">
</a>
</div>前端JS代码
<script type="text/javascript" src="__CDN__/static/common/jquery.min.js"></script>
<script type="text/javascript" src="__CDN__/static/common/js/ajaxfileupload.js"></script>
<script>
function ajaxFileUpload(url,id) {
$.ajaxFileUpload
(
{
url: url, //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: id, //文件上传域的ID(html元素)
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
//这里获取后端代码输出的数据，同样的，有多个图片就写多个if
if(data.person_image){
$('.return_person_image').attr('src',data.person_image).show();
}
if(data.emblem_image){
$('.return_emblem_image').attr('src',data.emblem_image).show();
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
//统一说明：这里有两个方法，是因为有两张图片要上传，你可以分成多个
let Cert = {
__uploadPerson: function (obj,id){
//模拟用户点击
$(obj).parent().find('input').click();
//当用户选择文件之后执行此代码进行文件上传
$(obj).parent().find('input').change(function (){
//这里是PHP代码生成上传地址，你可以手写
let url = "{:url('upfilepersonimage')}";
ajaxFileUpload(url,id);
});
},
__uploadEmblem: function (obj,id){
//模拟用户点击（与上方功能一致，不再赘述）
$(obj).parent().find('input').click();
$(obj).parent().find('input').change(function (){
let url = "{:url('upfileemblemimage')}";
ajaxFileUpload(url,id);
});
},
};
</script>后端代码
class Cert extends Controller
{
//http://zcagentadmin.com/upload/image/20220225/65684eb85b3b83b4f21964db7876eded.png
function upfilepersonimage(){
//这里是使用三方上传类库
//composer地址：composer require wanghua/general-utility-tools-php dev-master
//初始化上传类
$upload_obj = new FileUpload();
//调用单图片上传
$person_image_res = $upload_obj->image('person_image');
//打印上传结果，有多个参数，满足不同需要
//dump($person_image_res);die;
//验证空并赋值默认值
$person_image = empty($person_image_res['data']['outer_req_url'])?'':$person_image_res['data']['outer_req_url'];
//返回数据，（必须使用json方式）
return json(['person_image'=>$person_image]);
}
//这里功能与上方一样，只是上传两张图片用了两个方法
function upfileemblemimage(){
$upload_obj = new FileUpload();
$emblem_image_res = $upload_obj->image('emblem_image');
$emblem_image = empty($emblem_image_res['data']['outer_req_url'])?'':$emblem_image_res['data']['outer_req_url'];
return json(['emblem_image'=>$emblem_image]);
}插件下载
方便自己下载的ajaxfileupload.js备份-Javascript文档类资源-CSDN下载方便自己下载的ajaxfileupload.js备份-Javascript文档类资源-CSDN下载1、jquery异步上传图片2、js前端异步上传图片3、下载免费4、功能已测试可以使用更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qq_15941409/82354026
END