文件通过使用Ajax

Question

我想通过使用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，我认为阿贾克斯没有按不接受使用Bootstrap模式的文件上传。

Answer 1

您可以通过类似这样的AJAX使用引导模式上传文件。

在你的表单标签使用的属性是enctype和HTML表单就会像下面：

<form enctype="multipart/form-data" id="modal_form_id" method="POST" > 
    <input type="file" name="documents"> 
</form> 

JS代码：

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; 

    }