为了账号安全,请及时绑定邮箱和手机立即绑定

AJAX怎样在laravel里上传一个表单?

AJAX怎样在laravel里上传一个表单?

PHP
互换的青春 2019-03-09 06:27:25
以下是我的ajax代码和前端代码: <form id="file-upload-form" method="POST" action="/admin/upload/file" class="form-horizontal" enctype="multipart/form-data"> <input type="hidden" id="file-upload" name="_token" value="{{ csrf_token() }}"> <input type="hidden" id="file-upload" name="folder" value="{{ $folder }}"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> &times; </button> <h4 class="modal-title">上传新的文件</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="file" class="col-sm-3 control-label"> 文件 </label> <div class="col-sm-8" id="photo1"> <input type="file" id="file" name="file" > </div> </div> <div class="form-group"> <label for="file_name" class="col-sm-3 control-label"> 选择上传到的文件夹/命名并上传或直接命名并上传 </label> <div class="col-sm-4"> <input type="text" id="file_name" name="file_name" class="form-control"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button> <button type="button" class="btn btn-default" onclick="uploadPhoto()"> AJAX上传 </button> <button type="submit" class="btn btn-primary" onclick="handle_upload_image()" > 上传文件 </button> </div> </form> 其中上传文件按钮是正常的submit按钮,AJAX上传是AJAX上传按钮,下面是AJAX的JS代码: <script> // todo.. 可优化成无需传js参数即可上传 //AJAX上传base64 function uploadPhoto() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("file-upload-form").submit() } } xmlhttp.open("POST","",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send(); } </script> 就是要通过路由识别/admin/upload/file这个路径来把这个form的信息跟那个正常的上传文件按钮一样上传给控制器处理掉,目前就是500错误,(不用AJAX的那个没有问题的,即后端代码没问题的),所以问题是这个AJAX代码及具体该怎么写才对。 接受建议改成这样了,还是不行,求问哪里错了 function uploadPhoto() { var v = '查看内容是否加载:'; const file = $("#file").val(); var file_upload = $("#file-upload").val(); var file_name = $("#file_name").val(); var formData = new FormData($("#file-upload-form")); console.log(v+file+'___'+file_upload+'___'+file_name); $.ajax({ url:"/admin/upload/file", contentType: 'application/x-www-form-urlencoded', type:"POST", data:formData, datatype:"", processData: false, success:function(){ $('#page_image').html($('#file_name').text()); } }); }
查看完整描述

4 回答

?
幕布斯6054654

TA贡献1876条经验 获得超7个赞

这个用的不对啊 post请求啥也没传啊

查看完整回答
反对 回复 2019-03-18
?
心有法竹

TA贡献1866条经验 获得超5个赞

因为你要上传文件,所以 contentType: "application/json; charset=utf-8",是不正确的。

改成这样

 $.ajax({
    url:"/admin/upload/file",
    processData: false,
    contentType: false,
    type:"POST",
    data:formData,
    success:function(){
        $('#page_image').html($('#file_name').text());
    }
});
查看完整回答
反对 回复 2019-03-18
?
慕码人2483693

TA贡献1860条经验 获得超9个赞

contentType不需要

查看完整回答
反对 回复 2019-03-18
  • 4 回答
  • 0 关注
  • 425 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信