AJAX加FormDaTA实现文件上传[laravel框架下实现]

最新推荐文章于 2018-09-14 21:25:03 发布
最新推荐文章于 2018-09-14 21:25:03 发布
阅读量1.2k 收藏
点赞数
分类专栏： Laravel AJAX JavaScript/HTML5/CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyunping/article/details/74234758
版权 

<html>

<from id="upfrom;">

<div style="margin-top: 10px;display:none;">
    <div class="col-lg-2">
        <div style="float: left; font-size: 15px;">文章封面<span style="color: red;">*</span>
            <span style="font-size: 7px; color: #999; margin-left: 10px;">必填</span></div>
    </div>
    <div class="col-lg-6">
        <input type="file" id="picture" name="picture" class="col-lg-10 col-sm-5" style="height:30px;" placeholder="请选择文章封面" />
    </div>
</div>
</from>

</html>



<script>

var formData = new FormData($("#upfrom")[0]);
formData.append('id', res);
$.ajax({
    url: '{{route('pic')}}' ,
    type: 'POST',
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function (returndata) {
       if(returndata ==1){
           if(confirm('发布成功！是否继续发布？')){
            window.location.href = window.location.href;
             }else{
                 window.location.href = window.history.go(-1);
             }
       }
    },
    error: function (returndata) {
        return 0;
    }
});



</script>

<?php

public function pic(Request $request){
       if($request->file('picture')){
        if($request->hasFile('picture')&&$request->file('picture')->isValid()){
            $path='photos/upload/';
            $clientName=$request->file('picture')->getClientOriginalExtension();
            $clientName = time().md5('picture').'.'.$clientName;
            $request->file('picture')->move($path,$clientName);
            $imgurl = $path.$clientName;
            $arr['article_id']=$request->input('id');
            $arr['url'] = $imgurl;
            $arr['status'] = '1';
            $pic = $this->photo->addorupdate($this->photo->getTable(),$arr);
            if($pic){
                return 1;
            }else{
                return 0;
            }
        }else{
            return 0;
        }
    }
}

?>

焚膏油以继晷，恒兀兀以穷年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Laravel--ajax--文件上传
xiaoningzhang的博客
11-16 1087
使用laravel--ajax，实现简单的文件上传
laravel博客开发之利用jcorp结合laravel和ajaxupload实现用户头像上传和裁剪功能
zfeig的专栏
01-23 4628
最近使用laravel的时，候想实现用户上传头像，并自定义区域裁剪的功能；查了一些资料基本上都是Jcorp+uplodify+php的方法实现的；于是做了demo，也基本上实现了功能，郁闷的事，在结合laravel的时候uplodify上传302错误码，按照网页的方法传递session_id,也不见生效，后来改用ajaxupload完美实现了这个功能，特此记录： final效果图：
ajax + Laravel 多文件上传（附带博文说明）
02-07
这是在 Laravel 5.4 框架下的多文件 Ajax 上传的部分代码，详情请参见 http://blog.csdn.net/lmn13/article/details/79280756（附带 gif 图）
Laravel-5.5 ajax文件上传
php_lidong的博客
05-09 1095
控制器引用:use Storage;
laravel5.5 ajax 提交文件 formdata 上传文件 带有上传进度条
weixin_39577247的博客
09-14 2021
现在就是在后台验证格式，应该在前台进行验证，这样使用体验更好，如果在后台进行验证的话，那么就会文件上传完成了之后才会返回错误信息，当文件过大，那么等待的时间就会很长，我是设置了，上传文件之时，不可点击，当上传完成之后才可以。 html代码 &lt;form class="am-form am-form-horizontal" id="uploaddia...
利用laravel+ajax实现文件上传功能方法示例
12-30
早期的XMLHttpRequest不支持文件上传，一般用第三方js插件或者flash，现在可以借助XMLHttpRequest Level 2 的FormData对象实现二进制文件上传，正好最近工作中遇到了这个需求，所以本文就来给大家总结下实现的方法，...
基于 laravel5.2 PHP框架 + Amaze UI模板 + Ajax异步上传插件 + UEditor ，做的博客系统
最新发布
07-23
在这个博客系统中，采用了 Ajax 技术实现文件的异步上传。Ajax 允许在不刷新整个页面的情况下与服务器进行数据交换，提供更流畅的用户体验。异步上传插件通常会配合 formData 对象，通过 XMLHttpRequest 或 Fetch ...
angularjs实现上传图片并且预览
04-18
在本文中，我们将深入探讨如何使用AngularJS框架来实现图片上传和预览功能。AngularJS，作为一款强大的前端JavaScript框架，提供了丰富的功能和模块化设计，使得开发动态Web应用变得更加简单。图片上传和预览是现代...
Laravel手动返回错误码示例
10-16
在Laravel框架中，处理错误和异常是系统性的重要部分。在某些情况下，开发者可能需要手动返回错误码，以便前端能够根据错误码做出相应的处理。本文将详细解释如何在Laravel中实现这一功能。 首先，理解HTTP状态码的...
总结：ajax多文件上传，laravel后台篇
qq_29238009的博客
08-28 2008
前端：http://blog.csdn.net/qq_29238009/article/details/77649524我这里后台用的是php框架laravel写的，如果你是用这个框架或者类似框架写的话，可以参考下我写的代码，如果是用其他语言写的话，可以看看我写的流程。 —————————————————————正文———————————————————————controller：public
记Laravel调用Gin接口调用formData上传文件的实现方法
01-21
第一次错误: [output] 【c.FormFile error==>】 multipart: NextPart: EOF file 没有传值，或者非预定格式，stream resource 第二次错误: [output] 【c.FormFile error==>】 multipart: NextPart: bufio: buffer full header头不需要 content-type => ‘multipart/form-data’ php 调用参考: 你可以通过使用 multipart 请求参数来发送表单 (表单 enctype 属性需要设置 multipart/form
laravel框架 上传图片问题解析
不忘初心，方得始终
08-04 2535
今天碰到一个上传图片文件报500的服务器内部错误，首先想到是不是文件大小限制的问题，但是检查没有超过限制大小。 用的是move方法时，报的错。  通过在网上找答案，看到有这样一条回答，         I don't want to count all characters in the filename in the screenshot, but there could be an
laravel上传图片调用接口，使用formData 上传图片 展示在本页面
青春已被放纵了 的博客
02-04 3694
form id= "uploadForm"> p >上传文件： input type="file" name="file"/>p> input type="button" value="上传" onclick="doUpload()" /> form> script src="./js/jq.js">script> script> function doUpload() {
laravel 图片上传和修改
陈羽
11-21 1617
图片的域名可以在config/app.php中添加  img_url'=&gt; '图片的域名',图片域名在项目中的使用 &lt;img src="{{config('app.img_url').数据库的图片路径}}" alt="图片" width="120" height="50" /&gt;路由文件可以为（可以自定义）// 文件上传相关Route::group(['prefix'=&gt;'u
带进度条上传多视频
u011020900的博客
07-22 1004
效果： 引用： <link rel="stylesheet" href="bootstrap.css"> <script src="jquery.fileupload.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script>html:<div class="form-group">
Laravel+Blob多图上传
谷子的博客
09-13 2448
一.介绍 我们知道多图上传一般都附带的又即时显示功能，即上传后可以立刻看到所传图片。之前一直用的一个多图上传插件是选择图片，点击上传然后图片资源上传到服务器，然后返回存储的路径信息，最后我们点击表单的提交按钮后将这些信息插入数据库。 现在有一个尴尬的地方，当我点击上传图片后，我又取消这次表单提交了。可是图片资源已经到服务器了，容易造成空间浪费等。 现在提供一个自己结合Laravel框架写的多
ajax 利用formdata对象 实现多文件上传
热门推荐
u010957293的专栏
06-17 1万+
直接上代码: html代码<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>多文件上传</title> <script src="jquery.js"></script> <script> $(function(){ $("#btn").click(function()
使用formdata提交ajax请求
danxingqingtian的博客
07-21 1万+
var form = $("#form_id")[0]; var oFile = $("#media").get(0).files[0]; var formData = new FormData(form); //FormData可以一次性获取form表单的全部内容 formData.append("name","名字"); //追加非form表单的内容 formData.append(...
使用FormData对象提交表单
webbc的博客
10-12 8142
这是HTML5中新增的一个Api，他能以表单对象作为参数，自动的把表单的数据打包，当ajax发送数据时，发送这个FormData对象，以达到发送表单数据的目的。创建： 参数是一个form节点对象var fm = document.getElementById('formid'); var fd = new FormData(fm);优点： （1）在以往的ajax做post请求时，当提交的数据比较
如何使用 formData 和 ajax 工具实现文件上传功能
06-09
要使用 formData 和 ajax 工具实现文件上传功能，你需要完成以下步骤： 1. 创建一个表单，包含一个文件上传表单项： ``` ``` 2. 使用 FormData 对象构建表单数据： ``` const form = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值