如何在laravel中创建jpg，xls，pdf的预览显示

rryofs0p 于 2023-06-24 发布在其他

关注(0)|答案(2)|浏览(116)

我应该创建一个控制器文件来显示文件或图片吗？我用锚标签

laravel

来源：https://stackoverflow.com/questions/73050310/how-to-create-a-preview-display-for-jpg-xls-pdf-in-laravel

2条答案

按热度按时间

ct2axkht1#

你不需要一个laravel代码，只需要 AJAX 和jquery：

$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
    url:"{{route('add-image-ajax')}}", 
    type:'POST',
    data: {'_token' : '{{ csrf_token() }}', 'image': response},
    success:function(data){
        console.log('Crop image has been uploaded');
        $('input[name = uploaded_img]').val(data.success);
            $("#previewImgTag").attr('src', response);
    }
    })

赞(0）回复(0）举报 2023-06-24

ars1skjm2#

/* 图像预览显示 */

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css" integrity="sha512-In/+MILhf6UMDJU4ZhDL0R0fEpsp4D3Le23m6+ujDWXwl3whwpucJG1PEmI3B07nyJx+875ccs+yX2CqQJUxUw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
$(document).ready(function(){
 $('.dropify').dropify();

            var drEvent = $('#input-file-events').dropify();
           
           
            var drDestroy = $('#input-file-to-destroy').dropify();
            drDestroy = drDestroy.data('dropify')
            $('#toggleDropify').on('click', function(e) {
                e.preventDefault();
                if (drDestroy.isDropified()) {
                    drDestroy.destroy();
                } else {
                    drDestroy.init();
                }
            });
});
});
</script>
</head>
<body>

<div class="col-md-3">
  Upload Passport(Max Size 5mb)
 </div>
<div>
  <input id="passport_docs" class="dropify " name="passport_docs" type="file" value="{{ old('passport_docs') }}" data-allowed-file-extensions="pdf doc docx png jpg jpeg" data-max-file-size="5120K" />
</div>

</body>

/*and upload data with formData*/

 var passport_docs = $("#passport_docs").prop("files")[0];

  var form_data = new FormData();
  form_data.append("passport_docs", passport_docs);
     
    $.ajax({
    url:"{{route('add-image-ajax')}}", 
    type: 'POST',
  cache: false,
  contentType: false,
  processData: false,
  data: form_data,
   dataType: 'json',
  success: function (response) {

  }
    });

赞(0）回复(0）举报 2023-06-24

我来回答

如何在laravel中创建jpg，xls，pdf的预览显示

2条答案

相关问题

热门标签

最新问答