laravel-文件上传处理
来源:互联网 发布:好人 知乎 编辑:程序博客网 时间:2024/05/17 05:00
laravel文档中关于文件上传的资料很少,这里实现一个ajax上传:
html内容:
upload.blade.php
@extends('layout.default')@section('title', '注册')@section('content')<!--上传界面--><div class="col-md-offset-2 col-md-8"> <div class="panel panel-default"> <div class="panel-heading"> <h5>上传</h5> </div> <div class="panel-body"> @include('shared.upload_image') <div class="form-group row"> <label class="col-md-2 control-label">图片一</label> <div class="col-md-4 thumb-wrap"> <div class="pic-upload btn btn-block btn-info btn-flat" title="点击上传">点击上传</div> <img id="test_upload" src="" height="100px" /> <input type="hidden" name="test_upload" value="" /> </div> </div> <div class="form-group row"> <label class="col-md-2 control-label">图片二</label> <div class="col-md-4 thumb-wrap"> <div class="pic-upload btn btn-block btn-info btn-flat" title="点击上传">点击上传</div> <img id="test_upload2" src="" height="100px" /> <input type="hidden" name="test_upload2" value=""> </div> </div> </div> </div></div>@stop
upload_image.blade.php
<!-- 上传图片弹出层div /S--><div class="upload-mask"></div><div class="panel panel-info upload-file"> <div class="panel-heading"> 上传图片 <span class="close pull-right">关闭</span> </div> <div class="panel-body"> <div id="validation-errors"></div> {!! Form::open( array('url' =>['/upload'], 'method' => 'post', 'id'=>'imgForm', 'files'=>true) ) !!} <div class="form-group"> <label>图片上传</label> <span class="require">(*)</span> <input id="thumb" name="file" type="file" required="required"> <input id="imgID" type="hidden" name="id" value=""> </div> {!!Form::close()!!} </div> <div class="panel-footer"> </div></div><!-- 上传图片div /E-->路由:
//上传Route::get('/upload', 'UsersController@showUpload');Route::post('/upload', 'UploadController@imgUpload')->name('upload');
PHP:
showUpload方法
//显示上传页 public function showUpload() { return view('users.upload'); }
<?php/* 图片上传 */namespace App\Http\Controllers;use Illuminate\Http\Request;use App\Http\Requests;use App\Http\Controllers\Controller;//上传相关use Redirect, Input, Response;class UploadController extends Controller{ //Ajax上传图片 public function imgUpload(){ $file = Input::file('file'); $id = Input::get('id'); $allowed_extensions = ["png", "jpg", "gif"]; if ($file->getClientOriginalExtension() && !in_array($file->getClientOriginalExtension(), $allowed_extensions)) { return Response::json(['success' => false,'error' => '你只能上传png,jpg或者gif']); } $destinationPath = 'uploads/images/'; $extension = $file->getClientOriginalExtension(); $fileName = str_random(10).'.'.$extension; $file->move($destinationPath, $fileName); return Response::json( [ 'success' => true, 'pic' => asset($destinationPath.$fileName), 'id' => $id ] ); } }JS内容:
<script src="/js/jquery.form.js"></script><script src="/js/upload.js"></script>upload.js
/* upload image */$(function(){ $('.upload-mask').on('click',function(){ $(this).hide(); $('.upload-file').hide(); }) $('.upload-file .close').on('click',function(){ $('.upload-mask').hide(); $('.upload-file').hide(); }) var imgSrc = $('.pic-upload').next().attr('src'); console.log(imgSrc); if(imgSrc == ''){ $('.pic-upload').next().css('display','none'); } $('.pic-upload').on('click',function(){ $('.upload-mask').show(); $('.upload-file').show(); console.log($(this).next().attr('id')); var imgID = $(this).next().attr('id'); $('#imgID').attr('value',imgID); }) //ajax 上传 $(document).ready(function() { var options = { beforeSubmit: showRequest, success: showResponse, dataType: 'json' }; $('#imgForm input[name=file]').on('change', function(){ //$('#upload-avatar').html('正在上传...'); $('#imgForm').ajaxForm(options).submit(); }); }); function showRequest() { $("#validation-errors").hide().empty(); $("#output").css('display','none'); return true; } function showResponse(response) { if(response.success == false){ var responseErrors = [response.error]; $.each(responseErrors, function(index, value){ if (value.length != 0){ $("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>'); } }); $("#validation-errors").show(); } else { $('.upload-mask').hide(); $('.upload-file').hide(); $('.pic-upload').next().css('display','block'); console.log(response.pic); $("#"+response.id).attr('src',response.pic); $("#"+response.id).next().attr('value',response.pic); } }})提示:如果你的laravel没有安装form组件,那么可以直接写form标签
{!! Form::open( array('url' =>['/upload'], 'method' => 'post', 'id'=>'imgForm', 'files'=>true) ) !!}
以上是全部代码
阅读全文
0 0
- laravel处理文件上传
- laravel-文件上传处理
- Laravel 上传文件异常处理
- laravel 文件上传
- laravel如何上传文件
- laravel之文件上传
- Laravel 教程 - 文件上传
- laravel文件上传
- Laravel之文件上传
- Laravel之文件上传
- laravel文件上传
- 【笔记】laravel上传文件
- laravel文件上传
- Laravel文件上传
- Laravel之文件上传
- laravel 文件上传
- Laravel--ajax--文件上传
- Laravel 文件上传方法
- 剑指offer:二叉树的下一个结点
- linux split 命令
- js的dom对象及elements对象
- 性能测试:SequoiaDB vs. MongoDB vs. Cassandra vs. HBase
- 各种Activity隐式跳转
- laravel-文件上传处理
- ToolBar的使用
- 矩阵 快速幂
- 联想Thinkpad E470u盘启动盘bios设置图文操作
- 设计模式 Concurrency 之 ProducerConsumer 生成者消费者模式
- Android与js交互上传图片
- 数据结构与算法之数组
- 170809 通信-ZigBee协议栈广播组网(发送)
- HDU 5212 code (莫比乌斯反演)