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

小飞鱼EMS设备管理系统 专栏收录该内容
3 篇文章 0 订阅

有时页面需要一次上传多个图片,而且不能刷新页面,因此使用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过来的数据,正常处理将图片上传即可,即可实现每次选择都会将图片上传的效果。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值