用ajax上传jQuery文件

时间:2018-06-28 22:26:35

标签: php jquery ajax laravel

            <div class="form-group">
                <label class="form-control-label">
                    {{ __('Not Dosyası') }} : <span class="m--font-danger">*</span>
                </label>
                <br />
                <button type="button" onclick="$('#new--file').trigger('click');" class="btn m-btn m-btn--gradient-from-primary m-btn--gradient-to-info">{{ __('Not Dosyasını Yükle') }}</button>
            </div>
            <form id="new--form_file" enctype="multipart/form-data">
                <input class="m--hide" type="file" name="file" id="new--file" />
            </form><!-- group image form -->

jquery:

$(function() {
    $("#new--file").on('change', (function(e) {
        LessonNote.new.readURL(this);
    }));
});

readURL方法:

    readURL: function(input) {
        var file = input.files[0];
        var fileType = file.type;
        var fileSize = file.size;
        var match = ["application/pdf"];
        var maxSize = 20971520; // 20MB

        if (fileSize > maxSize) {
            swal(LANGCONVERT.error + '!', LANGCONVERT.file_maximum_size_20, "error");
        } else if (!((fileType === match[0]))) {
            swal(LANGCONVERT.error + '!', LANGCONVERT.file_supported_types_pdf, "error");
        } else {
            $.ajax({
                url: api.main + api.file_upload,
                type: 'post',
                data: file,
                success:function(data){
                    console.log(data);
                },
                cache: false,
                contentType: false,
                processData: false
            });
        }
    }

Laravel方面:

public function store(Request $request) {
    $rules = [
        'file' => 'required|max:10000|mimes:pdf,jp2,jpeg,jpg,png,bmp,tiff,tif,mirax'
    ];

    $this->validate($request, $rules);

    $data = $request->all();
    $data["file"] = $request->file->store('');

    return $this->showMessage($data, 201);
}

返回错误:

  

http://localhost:8181/api/file_upload 422(不可处理实体)

这意味着必须填写文件字段。

我尝试使用POSTMAN,效果很好。如何发送带有名称的文件作为文件?

1 个答案:

答案 0 :(得分:2)

您在这里做错了

var file = input.files[0];
...
$.ajax({
    ...
    data: file,
    ...
...

相反,您需要使用FormData()

发送
var file = input.files[0];
var formData = new FormData();
formData.append("file", file);

...
// and in $.ajax({
$.ajax({
    ...
     data: formData,
    ...
...

希望如此,您可以在此处查看其他基本示例-Ajax Upload image

我已用...截取了您的其他代码,以将您的错误指向确切的代码。