- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
Utilisez ajax pour soumettre un ensemble de formulaires contenant une image.
À l'origine, lors de la soumission sans ajax, elle peut être enregistrée avec succès dans la base de données
Mais comme l'image doit être compressée avant le téléchargement, elle est modifiée en soumission ajax. . La requête ajax est envoyée avec succès, mais elle ne peut pas être enregistrée dans la base de données,
Je pense qu'il se peut que le code dans le contrôleur doive être modifié, mais je ne sais pas comment.
ps : Le plug-in localResizeIMG est utilisé pour compresser les images. https://github.com/think2011/localResizeIMG
Voici la vue de la soumission du formulaire en utilisant ajax :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<p class="container">
<fieldset class="form-group">
<label for="title">标题</label>
<input type="text" class="form-control" id="title" placeholder="">
</fieldset>
<fieldset class="form-group">
<label for="content">内容</label>
<textarea class="form-control" id="content" rows="3"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="photo">图片</label>
<input type="file" name="file" accept="image/*" class="form-control-file" id="photo">
<img id="preview"/>
</fieldset>
<a id="submit" class="btn btn-primary">提交</a>
</p>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.1.1/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"
integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7"
crossorigin="anonymous"></script>
//用了localResizeIMG插件，用于上传图片前先压缩。https://github.com/think2011/localResizeIMG
<script src="js/dist/lrz.all.bundle.js"></script>
<script>
$(function () {
var $preview = $('#preview');
var formData = null;
$('#photo').on('change', function () {
lrz(this.files[0], {
width: 800
}).then(function (rst) {
$preview.attr('src', rst.base64);
rst.formData.append('fileLen', rst.fileLen);
});
});
$("#submit").click(function (rst) {
$.ajax({
type: "POST",
url: "article/",
dataType: 'json',
cache: false,
data: {
title: $("#title").val(),
content: $("#content").val(),
photo: rst.formData
}
}).done(function (msg) {
alert("done: " + msg);
}).fail(function (jqXHR, textStatus) {
alert("fail: " + textStatus);
});
});
});
</script>
</body>
</html>
Ce qui suit est le contrôleur d'origine lorsque ajax n'a pas été utilisé. Il peut être enregistré avec succès dans la base de données. Maintenant, je ne sais pas comment le modifier.
public function store(Requests\StoreArticleRequest $request)
{
$article = new Article($request->except('photo'));
$article -> user_id = \Auth::id();
$file = $request->file('photo');
$destinationPath = 'uploads/';
$extension = $file->getClientOriginalExtension();
$fileName = \Auth::user()->id . '_' . time() . '.' . $extension;
$file->move($destinationPath, $fileName);
$article -> photo = '/'.$destinationPath.$fileName;
$article->save();
return redirect()->action('ArticleController@show', ['id' => $article->id]);
}Ce qui suit est StoreArticleRequest
public function rules()
{
return [
'title'=>'required',
'content'=>'required',
'photo'=>'image'
];
}