Php laravel:图像未与表单一起提交
我在一页中有此表格：Php laravel:图像未与表单一起提交,php,forms,image,laravel,submit,Php,Forms,Image,Laravel,Submit,我在一页中有此表格： <div class="card-block"> {!! Form::open(array( 'autocomplete' => 'off', 'id' => 'AddModel', 'url' => 'model/useradd', 'files' => true)) !!} <div class="form-group"> <label for="picture">Picture</label&g
<div class="card-block">
{!! Form::open(array( 'autocomplete' => 'off', 'id' => 'AddModel', 'url' => 'model/useradd', 'files' => true)) !!}
<div class="form-group">
<label for="picture">Picture</label>
@if( (new Jenssegers\Agent\Agent)->isMobile() )
{!! Form::file('image', ['id' => 'modelpic', 'accept' => 'image/*', 'capture' => 'camera']) !!}
@else
{!! Form::file('image', ['id' => 'modelpic']) !!}
@endif
<br/>
</div>
<div id="imagePreview" style="display: none;"></div> /** here I show preview of the image through JS */
<div class="form-group">
{!! Form::submit('Submit', array('id' => 'AddBtn', 'class' => 'btn btn-default' )) !!}
{!! Form::close() !!}
</div>
NULLjQuery(function ($) {
$(document).ready(function () {
$("body").on("submit", "#AddModel", function (e) {
var form = $(this);
$.ajax({
url: form.prop('action'),
type: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
console.log(data);
},
error: function (textStatus) {
{
var json = JSON.parse(textStatus.responseText);
console.log (json);
}
}
});
e.preventDefault();
});
});
});
jQuery(function ($) {
$(document).ready(function () {
$("body").on("submit", "#AddModel", function (e) {
var form = $(this);
var postData = new FormData($("#AddModel")[0]);
$.ajax({
type:'POST',
url:form.prop('action'),
processData: false,
contentType: false,
data : postData,
success:function(data){
console.log(data);
},
error: function (textStatus) {
{
var json = JSON.parse(textStatus.responseText);
console.log (json);
}
}
});
e.preventDefault();
});
});
});
这段代码检查请求是否有文件，如果有，则命名它，然后将文件移动到public dir中的文件夹
if($request->hasFile('modelpic')) {
$file = Input::file('modelpic');
//get file extension
$name = 'image'.$file->getClientOriginalExtension();
//move file to public/images dir
$file->move(public_path().'/images/', $name);
}
由于表单标签中的大小使用（
多部分表单数据<div class="card-block">
{!! Form::open(array( 'autocomplete' => 'off', 'id' => 'AddModel', 'url' => 'model/useradd', 'files' => true,'enctype' => 'multipart/form-data')) !!}
<div class="form-group">
<label for="picture">Picture</label>
@if( (new Jenssegers\Agent\Agent)->isMobile() )
{!! Form::file('image', ['id' => 'modelpic', 'accept' => 'image/*', 'capture' => 'camera']) !!}
@else
{!! Form::file('image', ['id' => 'modelpic']) !!}
@endif
<br/>
</div>
<div id="imagePreview" style="display: none;"></div> /** here I show preview of the image through JS */
<div class="form-group">
{!! Form::submit('Submit', array('id' => 'AddBtn', 'class' => 'btn btn-default' )) !!}
{!! Form::close() !!}
</div>
{！！Form:：open（数组（'autocomplete'=>'off'，'id'=>'AddModel'，'url'=>'model/useradd'，'files'=>true，'enctype'=>'multipart/Form data'））
图画
@if（（新Jenssegers\Agent\Agent）->isMobile（））
{！！Form:：file（'image'，['id'=>'modelpic'，'accept'=>'image/*'，'capture'=>'camera']）
@否则
{！！Form:：file（'image'，['id'=>'modelpic']）
@恩迪夫
/**这里我通过JS显示图像的预览*/
{！！Form:：submit（'submit'，array（'id'=>'AddBtn'，'class'=>'btn-btn-default'））
{！！Form:：close（）！！}
要使用ajax上载图像，请执行以下操作： 像这样做： 您可以像这样使用ajax上传文件 在表单标记中，使用属性enctype和表单html如下所示：
<form enctype="multipart/form-data" id="modal_form_id" method="POST" >
<input type="file" name="documents">
</form>
if(Input::hasFile('documents')) {
$path = "directory where you wish to upload file";
$file_name= Input::file('documents');
$original_file_name = $file_name->getClientOriginalName();
$extension = $file_name->getClientOriginalExtension();
$fileWithoutExt = str_replace(".","",basename($original_file_name, $extension));
$updated_fileName = $fileWithoutExt."_".rand(0,99).".".$extension;
$uploaded = $file_name->move($path, $updated_fileName);
echo $updated_fileName;
}
尝试更改为
dd（$request->file（'modelpic'）同样在validate use modelpicmodelpic上，这里是div的id
。。名称为“image”，无论如何，根据您的建议修改不会改变任何内容remove files=>true，并告诉我们，如果使用$request->input（'file'）显示值，则在您尝试进行预览时（而不是在存储时）会出现问题。不是吗？谢谢，但无论如何，文件应该在请求中，我在使用imagemagick修改后以不同的方式存储图像。问题是表单根本没有提交图像。请使用我的if
语句检查请求中是否有文件。在中包含回音如果@Chriz74您能用名称字段（图像）而不是id（modelpic）再次检查代码吗？已经完成，没有任何操作。下面是$request->all（）的结果<代码>数组：1[“_令牌”=>“YNDRn9VDR5W3nv6A4P8W7WeUWun77fnvjDZYq3bE”]
。。将文本框字段添加到表单并检查它是否出现在$request->all（）中毫无意义。我相信'files'=>true
添加了enctype=“multipart/form data”
，然后您可以使用如果（$request->hasFile（'photo'）{//code here}
多部分/表单数据已经存在，该表单转换为
，尽管难以置信，但按照您的建议指定它会神奇地工作！但是看看源代码，不管有没有该规范，都不会有任何变化！您应该检查php.ini文件中的post max size
和upload max size
，我会尝试，但我没有使用模式，表单在页面中。我正试图这样做是得到提交的数据，然后显示预览后，以便确认或中止提交。确认数据库中的存储，中止返回表单。现在我想这更好了，也许我不应该为了预览而将数据传递给控制器，而是直接传递给ajax查询，然后用确认按钮显示预览框。@Chriz74在回答中，我以模态表单为例。您可以使用上述代码发布普通表单数据。唯一需要更改的是获取表单数据的方式，如：var postData=newformdata（$（“#form_id”）[0]）；这不取决于模式表单或页面表单。我尝试了你的代码，它正在工作。我将用我使用的JS更新这个问题。有一件事我不明白。如果我记录formData，它似乎是空的，我找不到通过表单提交的数据，但它正在工作。
<form enctype="multipart/form-data" id="modal_form_id" method="POST" >
<input type="file" name="documents">
</form>
var postData = new FormData($("#modal_form_id")[0]);
$.ajax({
type:'POST',
url:'your-post-url',
processData: false,
contentType: false,
data : postData,
success:function(data){
console.log("File Uploaded");
}
});
if(Input::hasFile('documents')) {
$path = "directory where you wish to upload file";
$file_name= Input::file('documents');
$original_file_name = $file_name->getClientOriginalName();
$extension = $file_name->getClientOriginalExtension();
$fileWithoutExt = str_replace(".","",basename($original_file_name, $extension));
$updated_fileName = $fileWithoutExt."_".rand(0,99).".".$extension;
$uploaded = $file_name->move($path, $updated_fileName);
echo $updated_fileName;
}