Question

使用ajax上传音频文件时，我发现了问题

<form enctype="multipart/form-data" id="voiceformpost" method="POST">
  @csrf
  <input name="file" type="file" accept="audio/*" capture="microphone" id="recorder">
  <input type="text" name="post_id" hidden="hidden" value="{{$logid}}">
</form>

这是jquery脚本：

<script>
    $('#recorder').on('change', function(){
        var form      = $("#voiceformpost");
        var file_data = $("#recorder").prop("files")[0];   
        var formdata  = new FormData(form);
        formdata.append('file', file_data);
        $.ajax({
            url : "{{url('store-voice')}}",
            type: "POST",
            data : formdata,
            processData: false,
            contentType: false,
            success:function(data){
            }
        });
    });

</script>

控制台错误 “ TypeError：FormData构造函数：参数1没有实现HTMLFormElement接口。”

Answer 1

您只需删除<form>标记，然后将更改侦听器添加到您的输入中

$(document).ready(function() {
        $('#recorder').on('change', uploadFile);
    })

并且在uploadFile函数中，您可以接受数据

    function uploadFile(event) {
        var files = event.target.files;
        var formdata = new FormData();

        $.each(files, function(key, value) {
            formdata.append(key, value);

        });
    }

在Laravel和Ajax Jquery上没有刷新页面的情况下上传文件音频

1 个答案: