当前位置: 首页 > 面试题库 >

使用Ajax通过模式上传文件

范京
2023-03-14
问题内容

我想使用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模式的文件上传。


问题答案:

您可以像这样通过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;

    }


 类似资料:
  • 问题内容: 我使用2个文件index.js,upload.php尝试通过ajax上传文件(img),如果成功追加到div 。 但是它不起作用,有几个问题,下面我的代码有什么建议吗? 谢谢。 upload.php 1. 还需要添加吗? 2. 并检查$ _FILES的大小或tmp_name是否仍使用? index.js 3.这几行是对的吗? 4.我错过或错了什么吗? 问题答案: 在其构造函数中接受一个

  • 本文向大家介绍通过Ajax方式上传文件使用FormData进行Ajax请求,包括了通过Ajax方式上传文件使用FormData进行Ajax请求的使用技巧和注意事项,需要的朋友参考一下 通过传统的form表单提交的方式上传文件: Html代码  不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的: Js代码  如上,通过$(

  • 我有一个多文件上传表单: 我用ajax发布这些文件。我想一个接一个地上传选定的文件(为了创建单独的进度条,出于好奇)。 我可以通过以下方式获得文件列表或单个文件: 耶林 但是FileList是不可变的,我不知道如何提交单个文件。 我认为这是可能的,正如我所看到的http://blueimp.github.com/jQuery-File-Upload/.我不想使用这个插件,因为它与学习和结果一样重要

  • 问题内容: 我有多个文件上传表单: 我正在用ajax发布这些文件。我想一个接一个地上传所选文件(以创建单独的进度条,并且出于好奇)。 我可以通过以下方式获取文件列表或单个文件 耶陵 但是FileList是不可变的,我不知道如何提交单个文件。 我认为这是可能的,因为我看到了http://blueimp.github.com/jQuery-File- Upload/ 。我不想使用这个插件,因为它既要学

  • 我目前通过AJAX发布我的表单,代码如下: 现在,我想添加以相同形式上传图片的功能,并在这个JQUERY和相同的服务器端脚本中实现它。我唯一的问题是,我不知道怎么做…我测试了上面的代码,发现它没有将$_files-变量传递给服务器端脚本。 谁能带领我在任何方向,我需要做的,以增加与此脚本图像上传的可能性?

  • 本文向大家介绍通过Ajax使用FormData对象无刷新上传文件方法,包括了通过Ajax使用FormData对象无刷新上传文件方法的使用技巧和注意事项,需要的朋友参考一下 写在前面:本文说的这个方案有浏览器兼容性问题;所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+,对兼容性比较敏感的网站慎用。 在工作中