在laravel项目中使用Ajax动态添加多个文档名称和图像上传

问题描述 投票:0回答:1

我想添加多个输入和文件以通过单击按钮来动态浏览图像,并且要在服务器中上传带有图像的文档名称,我已经搜索了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部分

enter image description here

jquery ajax laravel
1个回答
0
投票
您可以在jQuery中使用append()。

例如:

// 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>

从根本上说,这是将文件发送到脚本,进行验证并检查的最简单方法,我也将其用于项目。
© www.soinside.com 2019 - 2024. All rights reserved.