Question

我的大脑正在融化看似简单的东西。我正在使用ajax将图像上传到此代码

foreach(Input::file('image') as $image){

        $imagename = $image->getClientOriginalName();

        $uploadflag = $image->move('public/uploads', $imagename);

        $urlPath = 'uploads/';

        $showPath = $urlPath . $imagename;

        if($uploadflag){

            $uploadedImages[] = $showPath;
        }
    }
    return View::make('index')
        ->with('uploadedImages', $uploadedImages);

目标页面是index.blade.php，其中包含

@foreach($uploadedImages as $uploadedImage)

 {{ HTML::image($uploadedImage) }}

@endforeach

在Chrome DevTools网络预览/响应中，我可以看到页面上的图像

<!DOCTYPE html>
<html>
<head>
</head>
<body>


    <div class="container">

        <div class="row">


           <img src="http://localhost:8000/uploads/3.jpg">


           <img src="http://localhost:8000/uploads/4.jpg">


        </div>

    </div>

但是该页面不会在浏览器中加载，它会保留在上传表单页面上。如果我删除jQuery ....

<script>
var form = document.querySelector('form');
var request = new XMLHttpRequest();
form.addEventListener('submit', function(e) {
    e.preventDefault();
    var formdata = new FormData(form);
    request.open('post', 'submit', true);
    request.send(formdata);

}, false);

</script>

....然后它就可以工作了。那么jQuery会发生什么，它会停止返回View :: make working，我该怎么办才能让它工作？

已更新这些是我尝试的一些变体 - ajaxindex是index.blade.php中容器div的id

$(document).ajaxSuccess(function() {
  $( "#ajaxindex" ).append( data );
});

$(document).ajaxSuccess(function() {
  $( "#ajaxindex" ).append( $uploadedImages );
});

$.ajax( "index", function( data ) {
  $( "#ajaxindex" ).append( data );
});

Answer 1

将以下标记添加到index.blade.php：

<div id="uploaded_images"></div>

然后使用以下JavaScript / jQuery代替您发布的JavaScript：

$(document).ready(function() {
    $('form').on('submit', function( e ) {
        e.preventDefault();
        var formdata = new FormData();
        $.ajax({
            url: this.action,
            type: 'POST',
            data: formdata,
            cache: false,
            dataType: 'html',
            processData: false, 
            contentType: false, 
            success: function( data ) {
                $('#uploaded_images').html( data );
            }
        });
    });
});

laravel return view :: make not working

1 个答案: