Question

我尝试编写将图像数据发送到控制器并保存的脚本，我使用jQuery获取图像然后创建表单数据并使用ajax发送它但在控制器中我的索引未定义，我尝试使用{{保存图像1}}，我的代码是：我的ajax脚本是：

$_FILES

我的控制器是：

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var title_image = $('#questionTitleImage').prop('files')[0];
var form_data = new FormData();
form_data.append('file', title_image);
$('#addQuestionLoader').show();
$.ajax({
    url: '/imageUpload/',
    type: 'GET',
    data: form_data,
    contentType: false,
    processData: false,
    success: function (data) {
        console.log(data);
    },
    complete:function () {
        $('#addQuestionLoader').hide();
    }
});

请帮我完成我的项目，如果你有最好的方法用ajax保存图片，请帮助我。

Answer 1

我认为您根本没有将文件发送到服务器。我可能会弄错，但你可以尝试这样的事情：

var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var title_image = $('#questionTitleImage').prop('files')[0];

var xhr = new XMLHttpRequest();
if (xhr.upload) {
    formData.append('file', title_image);
    // you forgot including the token
    formData.append('_token', CSRF_TOKEN);
    // change your request to POST, GET is not good for files
    xhr.open("POST", '/imageUpload', true);
    xhr.send(formData);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert("Uploaded");
        }
    }
}

这是我用来将图像文件发送到服务器的javascript代码。

对于控制器，你正在使用的move_uploaded_file函数应该可以正常工作，尽管我使用的是Laravel的本机文件处理和一个名为Intervention image的库。

http://image.intervention.io/

干预形象很棒，你可以用它来做很多事，我推荐它！

以下是我处理图片上传的方法：

use Illuminate\Http\Request;
use Intervention\Image\ImageManager;

public function upload(Request $request)
{
    // get image
    $file = $request->file('file');

    // instantiate Intervention Image
    $imageManager = new ImageManager();
    $image = $imageManager->make($file);

    // save image with a new name
    $image->save(public_path() . '/img/new-image.jpg', 100);

    return response()->json([
        'success' => true,
    ]);
}

如果您不想使用干预图像，则只需使用Laravel的本机文件处理程序传输文件：

// get image
$file = $request->file('file');
// save it
$file->store('img');

希望这会有所帮助，让我了解发生了什么，我会帮助：）

编辑：以下是完整示例

// javascript
$('body').on('change', '#questionTitleImage', function(e){
    e.stopPropagation();
    e.preventDefault();

    var CSRF_TOKEN = $('input[name=_token]').val();
    var files = e.target.files || e.dataTransfer.files;
    var file = files[0];

    var xhr = new XMLHttpRequest();
    if (xhr.upload) {
        var formData = new FormData();
        formData.append('file', file);
        formData.append('_token', CSRF_TOKEN);
        xhr.open("POST", '/image', true);
        xhr.send(formData);

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert('Success');
            }
        }
    }
});

CSRF令牌字段：

// this goes below your input type file
{{ csrf_field() }}

然后，将其附加到这样的formdata：

formData.append('_token', $('input[name=_token]').val());

laravel 5.2使用ajax将表单数据发送到控制器

1 个答案: