laravel5.5 ajax 提交文件 formdata 上传文件带有上传进度条

最新推荐文章于 2021-09-27 14:46:36 发布

weixin_39577247

最新推荐文章于 2021-09-27 14:46:36 发布

阅读量2k

点赞数 1

文章标签： laravel ajax php jquery

本文链接：https://blog.csdn.net/weixin_39577247/article/details/82708842

版权

本文介绍了如何在laravel5.5中利用AJAX和FormData实现文件上传，并且在前端展示上传进度条，提高用户体验。通过前端验证文件格式，避免大文件上传后长时间等待错误反馈。

摘要由CSDN通过智能技术生成

现在就是在后台验证格式，应该在前台进行验证，这样使用体验更好，如果在后台进行验证的话，那么就会文件上传完成了之后才会返回错误信息，当文件过大，那么等待的时间就会很长，我是设置了，上传文件之时，不可点击，当上传完成之后才可以。

html代码

<form class="am-form am-form-horizontal"
                    id="uploaddiamond" method="post" id="myForm2" enctype="multipart/form-data">
                  {
  {csrf_field()}}
                  <div class='sele' style="overflow: auto;">
                     <div >
                        <div>&nbsp;</div>
                        <div class="am-form-group">
                           <label for="user-email" class="am-u-sm-3 am-form-label">
                              视频封面</label>
                           <div class="am-u-sm-9">
                              <input type="file" id="image" required
                                    placeholder="上传图片" name="image">
                           </div>
                        </div>
                        <div class="am-form-group">
                           <label for="user-email" class="am-u-sm-3 am-form-label">
                              上传视频</label>
                           <div class="am-u-sm-9">
                              <input type="file" id="video" required
                                    placeholder="上传视频" name="video">
                           </div>
                        </div>
                        <script type="text/javascript"></script>
                        <div class="am-form-group">
                           <label for="name" class="am-u-sm-3 am-form-label">
                              视频名称</label>
                           <div class="am-u-sm-9">
                              <input type="text" id="name" required
                                    placeholder="请输入视频名称" name="name">
                              <!--<small>10字以内...</small>-->
                           </div>
                        </div>