webuploader - JavaShuo

近日项目中用到了百度的图片上传插件。有不少人第一次估计不知道应该如何使用，下面详细介绍如何将webuploader引入到项目中：javascript

单次支持最大上传300张图片，不得不说功能强大。css

官网下载地址：http://fex.baidu.com/webuploader/html

下载下来解压后你会看到以下文件java

直接将这个文件夹丢在项目中public/admin/webuploader下jquery

官网说了咱们须要引入web

而后你还须要一个HTML容器来选择须要上传的图片网络

当你将上述CSS，JS,HTML引入项目中后可能会出现页面无任何显示的状况，这时候你须要这样作(注意jquery.js与webuploader.js的引入顺序)app

你或许会好奇SWF文件没有引入，其实SWF文件在upload.js里面进行了引入

ui

接下来贴出所有代码:(这是批量上传，官网演示的其余上传类型同理)spa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>WebUploader演示</title>
<link rel="stylesheet" type="text/css" href="//你的路径webuploader.css" />
<link rel="stylesheet" type="text/css" href="//你的路径webuploader/examples/image-upload/style.css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="uploader">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或将照片拖到这里，单次最多可选300张</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div><div class="info"></div>
<div class="btns">
<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//你的路径webuploader/examples/image-upload/jquery.js"></script>
<script type="text/javascript" src="//你的路径webuploader/dist/webuploader.js"></script>
<script type="text/javascript" src="//你的路径webuploader/examples/image-upload/upload.js"></script>
</body>
</html>

演示效果以下：

支持旋转和删除和上传前的预览

固然有小伙伴可能会问上传的路由在哪里,以下，upload.js140行左右。只须要将server改为你的目标路由就好啦

在上传时咱们能够打开网络控制台

咱们能够看到请求里面包含了上传图片的MIME类型与图片类型以及form-data属性name=file。name在控制器里咱们只须要一句代码就能够接收到上传过来的图片，从而进行后续操做

$file = request()->file('file');