我想使用 Ajax 通过模式上传文件。我怎样才能做到这一点?
我的模式:
<div id="addBtn" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title" id="myModalLabel">Add a medicine</h5>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label class="control-label mb-10">Generic Name</label>
<select class="form-control" name="medicine_id" id="medicine_id">
@foreach($items as $item)
<option value="{{$item->id}}" >{{$item->generic_name}}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label class="control-label mb-10">Dosage Volume</label>
<input type="text" name="dosage_name" id="dosage-volume" class="form-control" placeholder="Example: 20mg">
</div>
<div class="form-group">
<label class="control-label mb-10">Form</label>
<input type="text" name="form" id="form" class="form-control" placeholder="Bottle, Tablet">
</div>
<div class="form-group">
<label class="control-label mb-10">Price Per piece</label>
<input type="text" name="price" id="price" class="form-control" placeholder="Price">
</div>
<div class="form-group">
<label class="control-label mb-10">Insert a photo</label>
<div class="panel-wrapper collapse in">
<div class="panel-body">
<div class="mt-20">
<input type="file" name="photo" id="input-file-now" class="dropify" >
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success waves-effect" data-dismiss="modal" id="save-dosage">Save</button>
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
这是我的 JavaScript 文件:
function addDosage(url){
console.log(url);
$.ajax({
type:'POST',
url:url,
data:{
'medicine_id' : $('select#medicine_id').val(),
'dosage-volume' : $('#dosage-volume').val(),
'form' : $('[name=form]').val(),
'price' : $('[name=price]').val(),
'photo' : $('[name=photo]').val()
},
success:callback,
error:err
})
}
function callback(data){
console.log(data);
}
function err(xhr, reason, ex)
{
console.log(+xhr.status);
}
这是我的控制器:
public function storeDosage(ProductsRequest $request){
$file = $request->file('photo');
$fileName = uniqid() . $file->getClientOriginalName();
if(!file_exists('medicine/images')){
mkdir('medicine/images', 0777, true);
}
$file->move('medicine/images', $fileName);
if(!file_exists('medicine/images/thumbs')){
mkdir('medicine/images/thumbs', 0777, true);
}
$thumb = Image::make('medicine/images/' .$fileName)->resize(150,150)->save('medicine/images/thumbs/' . $fileName,50);
//post information to db
$dosage = $this->dosage;
$dosage->dosage_name = $request['dosage_name'];
$dosage->form = $request['form'];
$dosage->medicine_id = $request['medicine_id'];
$dosage->price = $request['price'];
$dosage->save();
$image = $dosage->photo()->create([
'dosage_id' => $request->input('id'),
'file_name' => $fileName,
'file_size' => $file->getClientSize(),
'file_mime' => $file->getClientMimeType(),
'file_path' => 'medicine/images/thumbs'. $fileName,
'created_by'=> auth()->user()->id,
]);
return redirect()->route('medicineList');
}
但它返回错误 500。我认为 Ajax 不接受使用 Bootstrap 模式上传文件。