【备忘】关于jQuery异步上传文件使用总结(ajaxfileupload.js)

文章背景

今天要做个实名认证功能，本人做后端的，对前端玩得不太溜，不喜勿喷。

要实名就要上传身份证正反面，那就需要开发上传图片功能，网上有很多插件，有很多插件不能使用，有这样那样的问题，有的是jQuery版本高或者低了，导致插件用不了，有的是开发环境导致插件不能使用，也有可能是其它问题。

我是第二种。本来不打算用插件的，准备采用原生同步提交，但是后来觉得，体验不舒服，故修改代码，改成插件方式。

找插件，找了几个插件，英语很一般，外国插件就不考虑了。找了几个能看懂的，但是有的比较麻烦，或者风格不喜欢，几番尝试之后又继续换插件。

不知道各位在哪里找插件，楼主在码云上面找了，没找合适，github上面有，但没有中意的，然后在百度中找到一个插件“ajaxfileupload.js”，几番测试之后发现用不了，最后各种调试之后，发现是后台框架js冲突了（本次我要做的功能集成在后台系统中，那么后台框架中本身就引入了很多jQuery并且增加或改造了部分功能，如果想在后台使用，就得按照后台的jQuery插件的使用方式，看了后台框架的文档，太粗糙了，所以在后台使用本插件行不通，故转变思路，将功能界面跳转到前台模块中，这样就没有冲突了）。

......然后对此插件进行多轮测试，然后再对后台交互接口进行改造，最后测试，成功使用。

此插件有个要注意的地方，对于新手来说不友好，因为后台接口返回的数据格式有问题之后，此插件直接报错，而且错误提示非常不友好，我是在调试模式中，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代码

<!-- 经过测试，jQuery版本在1.8以上都可以，本次我测试了了jquery1.8和jquery3.5,因为jquery是向下兼容的，所以推断，高于1.8版本都可以（没必要太低了） -->
<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