Ajax 图片上传未按预期工作

Question

我试图在屏幕上显示预览后通过 JavaScript 发送图像，我拒绝使用 Dropzone、Plupload 或任何 JavaScript 库，因为我只想要一个简单的功能。

var finput;
var fileReader;
var fd; //formdata...

$(function(){
    fileReader = new FileReader;
    fileReader.onload = function(e) {
        var img = document.createElement("img");
        img.src = fileReader.result;  //display the image on the screen...
        img.height = 200;
        $('#pimgbox').html(img);       
       //enable the image button... // $('#pimagebox').html(img);
       $('#pimgbtn').removeAttr('disabled', 'disabled').removeClass('btn-alert').addClass('btn-primary');

    }
});

当你点击提交按钮时

$('#pimgbtn').bind('click', function(e){   

    //initialize the formdata...

    fd = new FormData();    //initialize the formdata..
    fd.append('pimgupl', finput.files[0]);   //s
    //alert(fd);

    $('#pimgldr').css('display','block');
    $(this).attr('disabled', 'disabled').removeClass('btn-primary').addClass('btn-alert')
   
    if(fileReader.result != null){

////////////// beginning of ajax call...

         var settings = {
                type: "POST",
                url: "/user/setprofilepix",
                data: fd
            }; //end of setting..

            $.ajax(settings)
            .done(function (response) {
               alert(response);
               resetPUplButtons();
               //close modal...
               $('#profimgwin').modal('hide');
            })
            .fail(function (jqXHR, textStatus, error) {
                alert('error sending file...' + error);
                resetPUplButtons();
            });

      /////////////////////////end of ajax calls.. 

    }else{
        alert('you havent selected an image yet..');
        resetPUplButtons();
    }

});

在我的 Laravel 用户控制器上，我有这个方法尝试上传图像，但它拒绝工作。

 public function setProfilePix(Request $request){
    $file = $request->file('pimgupl');
    $code = Auth::user()->profile->usrcode;
    $targetDir = public_path() . DS . 'userdata'.DS.'ppix';
    
    $newname = $targetDir.DS.strtolower($code).md5($code).'_'.time() .'.jpg';
   // echo $newname;
    //exit;
    $file->move($targetDir, $newname);

    echo 'saved';
}

我的输出面板中不断出现此错误：

第 418 行是 ajax 操作，我已经尝试了所有方法，但似乎没有任何效果。我还在 verifyCsrfToken.php - 中间件中为路由添加了一个异常，但它仍然无法正常工作。

Answer 1

在您的 jQuery 中尝试更改设置

var settings = {
                type: "POST",
                url: "/user/setprofilepix",
                data: fd
            }; 

到

var settings = {
                type: "POST",
                url: "/user/setprofilepix",
                data: fd,
                processData: false,
                contentType: false,
            };