6月 6, 2017 - 开发笔记, 有料    1 评论

文件拖拽上传—laravel5.1

环境:laravel5.1.33

首先定义一下路由:
Route::get('sc','ChuanController@sc');
Route::post('ass','ChuanController@ass');

为防止laravel的token验证:在MiddleWare的Verify中的 except中增加:'/ass'

2.显示模板文件上传框:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#one{
width: 400px;
height: 400px;
border: 1px solid red;
/* background: black; */
}
#f{
margin-top: 50px;
margin-left: 20px;
}
p{
margin-left:10px;
}
</style>
</head>
<body>
<div id="one" >
<p>或者拖拽文件上传到此处</p>
</div>
</body>
<script type="text/javascript">
var one = document.getElementById('one');
one.ondragenter = function(ev){ //进入投放区
//one.innerHTML += "进入";
ev.preventDefault();//阻止浏览器的默认事件
}
one.ondragover = function (ev){//经过投放区
ev.preventDefault();
}
one.ondragleave = function(ev){//离开投放区
//one.innerHTML += "离开";
ev.preventDefault();
one.innerHTML = ('请拖拽上传文件至此');
}
one.ondrop = function(ev){

var f = ev.dataTransfer.files;
//alert('a');
//console.log(ev.dataTransfer.files[0]);
var fm = new FormData();
//console.log(fm);
for(i=0;i<f.length;i++){
fm.append("pic",f[i]);   //将多个图片进行上传,追加到fm中,实现循环发送

var xhr = new XMLHttpRequest();
//console.log(xhr);
xhr.open("post","ass");  //用post方法进行请求ass路由,传递到方法中进行处理,注意token的问题就行(把ass的验证给关了,上面已经说过了)
xhr.send(fm);
}
ev.preventDefault();
}
</script>
</html>

第三:写方法1.在控制其中添加:use Stroage;

public function sc(){     //显示文件上传的模板
return view('wjsc');
}
方法 ::Storage上传方法:默认图片是传到storage/app目录下的,
 
 
public function ass(Request $req){ //接收拖拽上传的文件
$file = $req->file('pic');   //name值是pic
$name = $file->getClientOriginalName(); //获取文件原名
//echo $name;exit;
$ext = $file->getClientOriginalExtension(); // 扩展名
$realPath = $file->getRealPath(); //临时文件的绝对路径
$type = $file->getClientMimeType(); // 获取文件类型
// 上传文件
$filename = date('YmdHis') . uniqid() . '.' . $ext;
$bool = Storage::disk()->put($filename, file_get_contents($realPath));
}

5.如果想用pulic路径,则需要进入config/filesystems.php 找到"disks"数组将 'root' => storage_path('app'),改成'root' =>public_path('images'),就可以了,在sc方法中的$bool = Storage::disk()->put($filename, file_get_contents($realPath));  改成:$bool = Storage::disk('local')->put($filename, file_get_contents($realPath));  就ok了!!…

Post Views: 874

评论被关闭。