Laravel Ajax 上传图片

Question

我的 laravel ajax 应用程序出现问题，我无法通过 ajax POST 上传图像/文件。总是返回编号。

我觉得AJAX的问题，不用Ajax的上传效果很好

请在下面找到我上传图片的代码。

ajax : 

    $('form[name="photoedit"]').on('submit', function (e){
        var res = $(this).attr('id');
        var str = res;
        var variable = str.substr(1);

        e.preventDefault();

        var pic = $('#u'+variable).val();
        var mur_id = $('#mur_i'+variable).val();

            $.ajax({
                type: 'post',
                dataType: 'json',
                data: new FormData($("#p"+variable)[0], pic, mur_id),
                contentType: false,       .
                cache: false,             
                processData: false,
                success: function( data ) {
                    ....
                    }

view : 

{!! Form::open(array('url'=> '/01/mur', 'method'=>'POST', 'enctype'=>'multipart/form-data', 'id'=>'p'.$mur->id, 'name'=>'photoedit')) !!}          

{{ Form::file('u'.$journal->id, ['class' => 'upload fileUpload', 'multiple'=>'multiple', 'name'=>'u'.$journal->id, 'id'=>'u'.$journal->id]) }}

{!! Form::hidden('edi_i'.$mur->id, $mur->id) !!}

{{ Form::hidden('mur_i'.$mur->id, $mur->id, array('id' => 'mur_i'.$mur->id)) }}

{!! Form::submit('Save', array('class'=>'btn ideng', 'id'=>'d'.mur>id, 'style'=>'border-bottom: 2px solid #2d9e36; border-radius: 0; font-size: 12px; padding: 3px 8px; float: right; background: #35b73f; color: #ffffff; margin: 10px 0 5px 0;')) !!}

{！！表单::close() !!}

controller :

if($request->hasFile('pic')){

if($request->ajax()){
    $avatar=$request->file('pic');
    $filename=time() . '.' . $avatar->getClientOriginalExtension();
    Image::make($avatar)->resize(650,500)->save(storage_path('img/profil/'01'/mur/'. $filename));

        $edi_id=Input::get('mur_id');
    $user = \App\Mur::find($edi_id);

    $user->image = $filename;
    $user->save();
        return \Response::json($user);
}
}else{
return 'No';
}

没有隐藏字段，它工作得很好。 经验：

数据：新的FormData($("#p"+variable)[0]),

Answer 1

$(document).on('submit', 'form[name="photoedit"]', function(event) {
    event.preventDefault();
    var forms = document.querySelector('form[name="photoedit"]');
    var request = new XMLHttpRequest();
    var formDatas = new FormData(forms);
    request.open('post','/yourRouteHere');
    request.send(formDatas);

    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {

            //Return message from controller here
            //Handle it

            }
        }
    }
});

这对我来说很好。我想它可以提供帮助。另外，我在您的 AJAX 中注意到，我没有看到您发布表单的 URL。

我猜你的 AJAX 应该是这样的：

$.ajax({
    url: '/your-post-url', //Notice this URL
    type: 'POST',
    dataType: 'json',
    data: {new FormData($("#p"+variable)[0], pic, mur_id)},
    success: function(data) {

    }
});

在您的控制器中访问带有名称属性的 HTML 表单中的输入类型文件