将带有图像数据的Ajax请求发送到服务器(laravel5.1)

时间:2018-09-03 18:51:24

标签: javascript jquery ajax laravel

我想做的是向服务器发送“支持请求”,例如:

$("#help").submit(function(e) {
   $('.loadPage').toggle();
    e.preventDefault();
    s_name = $('#s_name').val();
    s_email = $('#s_email').val();
    s_comment = $('#s_comment').val();
    s_phone = $('#s_phone').val();
    s_client = JSON.stringify(getClient());
    s_provider = '{{$provider}}';
    s_screenshoot = JSON.stringify($('#screenshoot').val());

$.ajax({
           type: "post",
           url: '/help',
           data: { _token: "{{ csrf_token() }}", user: '{{$user->id}}', name:s_name, phone:s_phone, email:s_email, comment:s_comment, client: s_client, provider:s_provider, screenshoot: s_screenshoot},
           dataType: "json",
           success: function(data)

           {

            console.log(data);
            if (data.code === 1000) {
              $('#help_box').hide();
              $('#message_box').show();
            }
             $('.loadPage').toggle();
           },
                      error: function(data) {
            console.log(data);
             $('.loadPage').toggle();
           }
         });
});

我的表单是:

<div class="modal-content">
      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i style="color:#fff !important;" class="fa fa-times" aria-hidden="true"></i></button>
        <h4 class="modal-title" id="myModalLabel">Need some help?</h4>
      </div>
      <div class="modal-body">
        <div class="row">
        <div class="col-md-12" id="help_box">
         <p style="font-family: 'Pontano Sans', sans-serif;">Please fill in the form below and we will help you as soon as possible</p>

<form class="form-horizontal" id="help">
<input type="hidden" name="_token" value="3AM4NlGaYum8pzRCvW9OJBXeZZsyhv6wdankChuu">

  <div class="form-group">
    <label for="s_name" class="col-sm-3 control-label">Your Name</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="s_name" placeholder="Your Full Name*" required="">
    </div>
  </div>
  <div class="form-group">
    <label for="s_email" class="col-sm-3 control-label">Email Address</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="s_email" placeholder="Email Address*" required="">
    </div>
  </div>
 <div class="form-group">
    <label for="s_phone" class="col-sm-3 control-label">Phone Number</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="s_phone" placeholder="Phone Number">
    </div>
  </div>
  <div class="form-group">
    <label for="s_phone" class="col-sm-3 control-label">Please describe your issue in as much detail as possible.</label>
    <div class="col-sm-9">
      <textarea class="form-control" id="s_comment" required=""></textarea>
      <textarea id="screenshoot">data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAKoBVYDASIAAhEBAxEB/8QAHQABAAEEAwEAAAAAAAAAAAAAAAUDBAYHAQIICf/EAGQQAAEDAgMBBREIDQoEBQQCAwABAgMEBQYREiEHExQxkxUWFxgiQVFSVFVWkZSl0dLTMlNhcYGhpMEIIzU2N0JDdoKSsbK0MzRXc3R1g5WjsyRicsIlY4Si4UaFxPAnREVm8f/EABsBAQEBAQEBAQEAAAAAAAAAAAABAgMFBAYH/8QAOREBAAIAAwUFBQcDBAMAAAAAAAERAgMSBCExYZEFE0FRUhQVFjKhInGBscHR8AY0ciOCsuE1QvH/2gAMAwEAAhEDEQA/APKd+vtRe6nfJM2xNVVYxVzVue1dq7cs88k4kTJCLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC5ti6blSOREXKojXamae6Q9P80pe5qTydnoPL9u+6NL/Xx/vIelQLvmlL3NSeTs9A5pS9zUnk7PQWgAu+aUvc1J5Oz0DmlL3NSeTs9BaAC75pS9zUnk7PQOaUvc1J5Oz0FoALvmlL3NSeTs9A5pS9zUnk7PQWgAu+aUvc1J5Oz0DmlL3NSeTs9BaAC75pS9zUnk7PQOaUvc1J5Oz0FoALvmlL3NSeTs9A5pS9zUnk7PQWgAu+aUvc1J5Oz0DmlL3NSeTs9BaAC75pS9zUnk7PQOaUvc1J5Oz0FoALvmlL3NSeTs9A5pS9zUnk7PQWgAu+aUvc1J5Oz0DmlL3NSeTs9BaAC75pS9zUnk7PQOaUvc1J5Oz0FoALvmlL3NSeTs9A5pS9zUnk7PQWgAu+aUvc1J5Oz0DmlL3NSeTs9BaAC75pS9zUnk7PQOaUvc1J5Oz0FoALvmlL3NSeTs9A5pS9zUnk7PQWgAu+aUvc1J5Oz0DmlL3NSeTs9BaAC75pS9zUnk7PQOaUvc1J5Oz0FoALvmlL3NSeTs9A5pS9zUnk7PQWgAu+aUvc1J5Oz0DmlL3NSeTs9BaAC75pS9zUnk7PQOaUvc1J5Oz0FoALvmlL3NSeTs9A5pS9zUnk7PQWgAu+aUvc1J5Oz0DmlL3NSeTs9BaAC75pS9zUnk7PQOaUvc1J5Oz0FoALvmlL3NSeTs9A5pS9zUnk7PQWgAu+aUvc1J5Oz0DmlL3NSeTs9BaAC75pS9zUnk7PQOaUvc1J5Oz0F.... etc. etc ..... .... .....</textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-primary btn-lg">SEND</button>
    </div>
  </div>
</form>

    </div>
<div class="col-md-12" id="message_box" style="display: none;">
  <div class="alert alert-danger ">Thanks for submiting your request. We will contact you as soon as possible.</div>
</div>

        </div>
      </div>

    </div>

现场截屏,是用户的截屏,因此非常有必要将详细信息发送到服务器-管理员可以清楚地看到问题所在。

但是我得到了类似enter image description here

的回复

如何解决我的问题,以及如何通过ajax将图像发送到服务器? 我的代码有什么问题?

更新:

 error: function(data) {
            console.log(data);
             $('.loadPage').toggle();
           }

console.log(data)重新调谐我: enter image description here

0 个答案:

没有答案