PHP使用Ajax连续实现上传图片

Posted 2021-06-29 小飞鱼通达二开

有时页面需要一次上传多个图片，而且不能刷新页面，因此使用ajax即为比较合理的方案，思路就是在每次选择图片时触发onchange事件，然后用ajax将数据发送到后台处理，前台将结果更新或提示即可。

html部分，选择图片：

<input type="file" name="images" id="images" multiple accept='image/*' οnchange="upImg()">

处理脚本，使用jQuery：

<script type="text/javascript">
    function upImg() {
        $RUN_ID         = $("#RUN_ID").val();
        $RUN_PRCS_ID    = $("#RUN_PRCS_ID").val();
        $feedback       = $("#feedback").val();
        $USER_ID        = $("#USER_ID").val();

        var formData = new FormData();
        formData.append("RUN_ID",      $RUN_ID);
        formData.append("RUN_PRCS_ID", $RUN_PRCS_ID);
        formData.append("USER_ID",     $USER_ID);
        formData.append("feedback",    $feedback);
        formData.append("images",       $('input[name=images]')[0].files[0]);


        $.ajax({
            url:'{site_url('App/workController/solveImg')}', 
            type:'post',
            data: formData,
            contentType: false,
            processData: false,
            success:function(res){
                console.log(res.data);
                if(res.data=="succ"){
                    alert('成功');
                }else if(res.data=="err"){
                    alert('失败');
                }else{
                    alert(res.data);
                    console.log(res);
                }
            }
        })
    }
</script>

后端编写程序接收post过来的数据，正常处理将图片上传即可，即可实现每次选择都会将图片上传的效果。