Question

我在Laravel中写了一些水印代码并且工作正常。但现在我想在提交文件之前显示预览。但我收到错误＆＃34; POST 419（未知状态）＆＃34;

我的观看源代码是

<form class="form-horizontal" method="POST" action="{{ route('announcement.store') }}" enctype="multipart/form-data">
{{ csrf_field() }}

<label for="description">Description</label>
<textarea id="my-editor" class="textarea" name="description"  ></textarea>

<label for="image">Featured Image</label>
<input type="file" id="image" name="image">
<button type="submit" class="btn btn-success">Submit</button>
</form>

Javascript代码

$(document).ready(function() {

$("#image").change(function(e) {
var image = $('#image').val();
     $.ajax({
       type: 'POST',
       url:'{{url('/my-admin/imageupload')}}',
       data: {image:image},
       success: function( msg ) {
           alert(msg);
       },
       error: function( data ) {
           alert(data);
       }
   });
   });

在此代码中，当我更改图像时，我收到错误。我在图像上做了一些水印并将该图像保存在文件夹中。现在，我需要在提交表单之前在预览中显示该图像。

Answer 1

图片不会与此同时发送＆＃34; var image = $（＆＃39;＃image＆＃39;）。val（）;＆＃34;使用ajax请求时的一段代码，因为你需要使用data = new FormData（）;对于图像。

Answer 2

您错过了_token作为要在ajax上提交的数据，因此请将数据更改为

        data: {
            "_token": "{{ csrf_token() }}",
            "image":image
        },

Answer 3

我已通过此代码成功上传了图片。

$("#image").change(function(e) {
var data = new FormData();
data.append('image', $('input[type=file]')[0].files[0]);
data.append('_token', "{{ csrf_token() }}");
$.ajax({
        url:'{{url('/my-admin/imageupload')}}',
        type: 'POST',
        data : data,
        enctype : 'multipart/form-data',
        contentType: false,
        processData: false,
        success: function( data ) {
            var baseUrl = "{{asset('')}}";
            var imageUrl = baseUrl + data.msg;
            $('#changeimage').html('<img src="'+ imageUrl +'" height="120px" width="150px">');
        },
        error: function() {
            alert('unable to insert watermark on image');
        }
   });   
});

在使用ajax提交表单之前在Laravel中上传图像

3 个答案: