文件拖拽上传—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;
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了!!…