Laravel 5.2 整合 Uploadify 上传图片
前端:
<!-- 引入CSS、JS -->
<link rel="stylesheet" type="text/css" href="{{asset('org/uploadify/uploadify.css')}}">
<script type="text/javascript" src="{{asset('admin/js/jquery.js')}}"></script>
<script src="{{asset('org/uploadify/jquery.uploadify.min.js')}}" type="text/javascript"></script> <!-- 上传按钮 -->
<input id="file_upload" name="file_upload" type="file"><br>
<img id="picshow" src=""> <!-- 默认隐藏 #picshow{display: none;} --> <!-- 实例化 -->
<script>
$('#file_upload').uploadify({
swf : "{{asset('org/uploadify/uploadify.swf')}}", // 引入Uploadify 的核心Flash文件
uploader : "{{url('admin/upload')}}", // PHP脚本地址
width: 120, // 上传按钮宽度
height: 30, // 上传按钮高度
buttonImage: "{{asset('org/uploadify/browse-btn.png')}}", // 上传按钮背景图片地址
fileTypeDesc: 'Image File', // 选择文件对话框中图片类型提示文字(Windows系统)
fileTypeExts: '*.jpg;*.jpeg;*.png;*.gif', // 选择文件对话框中允许选择的文件类型(Windows系统)
formData : {'_token': '{{csrf_token()}}'}, // Laravel表单提交必需参数_token,防止CSRF
onUploadSuccess : function(file, data, response) { // 上传成功回调函数
$('#picshow').attr('src', data).show();
$('#file_upload).val(data);
},
onUploadError: function(file, errorCode, errorMsg, errorString) { // 上传失败回调函数
$('#picshow').attr('src', '').hide();
$('#file_upload).val('');
alert('上传失败,请重试!');
}
});
</script>
后端:
/**
* 图片上传
* @return [type] [description]
*/
public function upload()
{
$file = Input::file('Filedata'); // 不同环境可能获取方式有点不同,可以下打印观察一下 dd(Input());
if($file->isValid())
{
// 上传目录。 public目录下 uploads/thumb 文件夹
$dir = 'uploads/thumb/'; // 文件名。格式:时间戳 + 6位随机数 + 后缀名
$filename = time() . mt_rand(100000, 999999) . '.' . $file ->getClientOriginalExtension(); $file->move($dir, $filename);
$path = $dir . $filename;
return url($path);
}
} // $realPath = $file->getRealPath(); // 缓存在 tmp 文件夹的文件绝对路径
// $tmpName = $file->getFileName(); // 缓存在 tmp 文件夹的文件名
// $clientName = $file->getClientOriginalName(); // 获取原文件名称
// $extension = $file->getClientOriginalExtension(); // 上传文件的后缀
参考链接:简书 - laravel图片和文件的上传
uploadify 官网:http://www.uploadify.com
Laravel 5.2 整合 Uploadify 上传图片的更多相关文章
- 调试台自动多出现一个'' ,我 用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个''
对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香! 15:54 2016/3/12用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个' ...
- MVC中使用jquery uploadify上传图片报302错误
使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...
- MVC 中使用uploadify上传图片遇到的蛋疼问题
MVC 中使用uploadify上传图片遇到的蛋疼问题 初次使用uploadify上传图片,遇到了一些比较纠结的问题,在这里和大家分享下,有不对的地方还望大神多多指教,希望对刚接触的朋友有所帮助,文采 ...
- uploadify上传图片的使用
一:引用jquery.uploadify.js 二:代码 <body> <table> <tr> <td style="width: 15%; te ...
- uploadify上传图片
1.实现源代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...
- laravel中的验证及利用uploadify上传图片
$rules = [ 'password'=>'required|between:6,20|confirmed', ]; $message = [ 'password.required'=> ...
- uploadify上传图片的类型错误的解决办法
大家在做开发的过程中,相信很多人都会使用到uploadify插件来上传图片,但是这个插件也有不完美的地方. 我曾多次遇到过这样一个问题:上传的图片类型明明是没有问题的,但是在上传的时候总是会报错:图片 ...
- 使用uploadify上传图片时返回“Cannot read property 'queueData' of undefined”
在使用uploadify插件上传图片时,遇到一个比较坑的错误:上传时提示“Cannot read property 'queueData' of undefined”. 遇到这个问题有点无语,因为这个 ...
- laravel 5.5 整合 jwt 报错Method Tymon\JWTAuth\Commands\JWTGenerateCommand::handle() does not exist解决
今天介绍一个在laravel5.5新版本整合jwt 执行 php artisan jwt:generate 再生成密钥时报的一个错误 Method Tymon\JWTAuth\Commands\JW ...
随机推荐
- 【bzoj2272】[Usaco2011 Feb]Cowlphabet 奶牛文字 dp
题目描述 Like all bovines, Farmer John's cows speak the peculiar 'Cow'language. Like so many languages, ...
- Java线程常用方法详解
线程的常用方法 1.start() : 线程调用该方法将启动线程,使之从新建状态进入就绪队列排队,一旦轮到它来享用CPU资源时,就可以脱离创建它的线程独立开始自己的生命周期了. 2.run(): Th ...
- powerdesigner 点击preview 语句出现 if exists
drop table if exists XXX 这个是sql server 写法.如果要切换为 Oracle 写法 菜单栏: database-->change curren DBMS 选择你 ...
- c#中文件流的读写
文件流读入:第一static void Main(string[] args) { //C#文件流写文件,默认追加FileMode.Append string msg = "okffffff ...
- 【BZOJ 4555】[Tjoi2016&Heoi2016]求和 多项式求逆/NTT+第二类斯特林数
出处0.0用到第二类斯特林数的性质,做法好像很多,我打的是直接ntt,由第二类斯特林数的容斥公式可以推出,我们可以对于每一个i,来一次ntt求出他与所有j组成的第二类斯特林数的值,这个时候我们是O(n ...
- 史上最全Linux提权后获取敏感信息方法
http://www.freebuf.com/articles/system/23993.html 在本文开始之前,我想指出我不是专家.据我所知,在这个庞大的区域,没有一个“神奇”的答案.分享,共享( ...
- Codeforces Round #307 (Div. 2) D 矩阵快速幂+快速幂
D. GukiZ and Binary Operations time limit per test 1 second memory limit per test 256 megabytes inpu ...
- HTTP的消息结构?
参考:http://www.runoob.com/http/http-messages.html (1)请求数据包结构: 第一部分:请求行(数据包的第一行内容)[GET/HTTP/1.1] 请求行包含 ...
- HDU 4303 树形DP
Hourai Jeweled Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 163840/163840 K (Java/Others) ...
- 使用html5的Geolocation API实现定位
公司有个需求,需要获取用户的位置,所以看了下html5的Geolocation 这个新东西,发现挺好用的. <!DOCTYPE html> <html> <body> ...