t1441332354
t1441332354
采纳率71.8%
2018-06-06 09:04

关于ajax传值失败的问题

10
已采纳

这是前端代码

 <body>
  <div class="booth">
    <video id="video" width="400" height="300"></video>
    <input id='tack' type="button" value="拍照">
    <canvas id='canvas' width='400' height='300'></canvas>
    <img id='img' src=''>
    <input type="button" onclick="uploadImage();" value="上传">
  </div>

  <script>
    var video = document.getElementById('video'),
        canvas = document.getElementById('canvas'),
        snap = document.getElementById('tack'),
        img = document.getElementById('img'),
        vendorUrl = window.URL || window.webkitURL;
                    //媒体对象
    navigator.getMedia = navigator.getUserMedia ||
                         navagator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;
    navigator.getMedia({
        video: true, //使用摄像头对象
        audio: false  //不适用音频
    }, function(strem){
        console.log(strem);
        video.src = vendorUrl.createObjectURL(strem);
        video.play();
    }, function(error) {
        //error.code
        console.log(error);
    });
                    snap.addEventListener('click', function(){

        //绘制canvas图形
        canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

        //把canvas图像转为img图片
        img = canvas.toDataURL("image/png");

    });

    function uploadImage(){
        $.ajax({
            type:'post',
            url:'UploadImage',
            data:{image:img},
            async:false,
            datatype:'json',
            success:function(data){
                if(data.success){
                    alret('上传成功');
                }else{
                    alret('上传失败');
                }
            },
            error:function(err){
                alert('网络故障');
            }
        });
    }

这是后台代码
图片说明

我想用ajax把“img=canvas.toDataURL("image/png")”的数据传回后台UploadImage，可是后台打印出来的一直是null，想请问代码应该怎么修改？
如果用来传，应该怎么写

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • fengyubanlan fengyubanlan 3年前

    图片说明
    你这里ajax上传的参数名字写的是image，你后台是有img获取的，应该是获取不到的吧，你把后台获取的名字改成image试下呢

    点赞 2 评论 复制链接分享
  • qq_37250305 丶瞳丿 3年前

    如果不行的话，可以用window.top.location,href=地址？img=canvas.toDataURL("image/png")

    点赞 评论 复制链接分享
  • hahahhahahahha123456 I-T枭 3年前

    function UploadPic() {

    // Generate the image data
var Pic = document.getElementById("myCanvas").toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

// Sending the image data to Server
$.ajax({
    type: 'POST',
    url: 'Save_Picture.aspx/UploadPic',
    data: '{ "imageData" : "' + Pic + '" }',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (msg) {
        alert("Done, Picture Uploaded.");
    }
});

    }

    点赞 评论 复制链接分享
  • weixin_37601426 silence做作 3年前

    你ajax里面的data参数名是image,,然后webSerclet里面接收的img,肯定是null啊,你讲后台的改成request.getParameter("image");没太仔细看每个细节,你可以试下

    点赞 评论 复制链接分享
提交

为你推荐