我想添加多个输入和文件以通过单击按钮来动态浏览图像,并且要在服务器中上传带有图像的文档名称,我已经搜索了google,但是确切的示例找不到我想要的内容,这是我的代码。
<form method="Post" id="myForm" action="#" enctype="multipart/form-data">
<table class="table table-bordered table-condensed green" id="document">
<thead>
<tr>
<td>SL</td>
<td>Document Name</td>
<td>Browse</td>
<td>Image</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr id="01">
<td>01</td>
<td><input type="text" name="document_name[]" class="form-control input-sm"></td>
<td><input type="file" id="imageUpload" name="image[]" class="form-control input-sm imageUpload" size="8"></td>
<td><img src="{{ asset('images/doc.gif')}}" class="img-responsive img-thumbnail" id="img_01" width="30" height="40" alt='image show after upload'/></td>
<td class='text-center'><i class='fa red fa-trash fa-lg'>x</i></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><button class="" id="newDocument">Add New</button></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<br/>
<button type="button" id="cusDocument" class="btn btn-xs btn-success cusDocument">Save</button>
</form>
Ajax上传部分
/*---------upload and save section by ajax--------------*/
``$('#cusDocument').on('click',function(e){
e.preventDefault();
var token = "{{csrf_token()}}";
var formData = new FormData(this);
$.ajax({
data:formData:formData,'_token' : token,
url: "{{ route('admin.customer.customerDocument') }}",
type: "Post",
dataType: 'json',
success: function (data){
console.log(data)
alert(data)
},
error: function (data) {
//console.log('Error:', data);
}
});
});``
客户控制器customerDocument上传方法部分
``public function customerDocument(Request $request){
/*-------what can i do here to upload this document name and image-----------*/
foreach($request->file('image') as $image)
{
if($request->hasfile('image'))
{
$name = $image->getClientOriginalName();
$image->move(public_path().'/images/', $name);
$imageName = $name;
}else{
$imageName = 'default.png';
}
$new = new CustomerDocument();
$new->customer_id = $request->customer_id;
$new->document_name = $data['document_name'][$i];
$new->document_image = $imageName;
$new->created_by = Auth::id();
$new->save();
}
}``
示例图像html部分
例如:
// We register an EventHandler for our input element (#uploadFile)
// if it changes
$('body').on('change', '#uploadFile', function() {
var data = new FormData(); // this is our Data-Object ...
data.append('file', this.files[0]); // ...where we append our File
$.ajax({
url: 'YourScript', // Where do we sent our file
data: data, // this is our Data-Object
type: 'POST', // HTTP Method, in this case we use POST
processData: false,
contentType: false,
// if everything was succesfull
// load our response in this HTML div-element
success: function() { $("#responses").append("
Uploaded successfully");
}
});
}
u可以根据需要添加尽可能多的数据您的HTML可能看起来像这样。
<title>Upload per AJAX</title> <input type="file" id="uploadFile"> <div id="responses"></div>
从根本上说,这是将文件发送到脚本,进行验证并检查的最简单方法,我也将其用于项目。